sass-extract-loader

Webpack loader for sass-extract. Extract structured variables when importing sass files.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
sass-extract-loader
1.1.05 years ago6 years agoMinified + gzip package size for sass-extract-loader in KB

Readme

sass-extract-loader
Build Status npm version dependencies Status devDependencies Status peerDependencies Status
Webpack loader for sass-extract.
Require sass files as modules containing the variables defined in those files. Supports @include directives for extracting variables across multiple files.
This does not replace the sass-loader for requiring sass in order to generate css, but serves as an additional tool in order to use variables defined in sass in your javascript modules.
demo.gif

Install

You need to install the sass compiler, sass-extract and the loader since they are all peer dependencies.
npm install --save node-sass sass-extract sass-extract-loader

Usage

Recommended
The recommended usage is to use the loader explicitly when requiring .sass or .scss files since you are likely to have separate loader for generating the css for your app from the same sass files.
const style = require('sass-extract-loader!./style.scss');

/*
style ==> {
  global: {
    $variable: <value>
    ..
  }
}
*/
Alternative
You can add the loader in your webpack configuration file as expected.
{
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'sass-extract-loader'
      }
    ]
  }
}

Note that this alternative might not be a good choice as you likely want the default behavior of requiring a sass files to be generating css from it. However, you might have a case when you want to use certain files as runtime variables to be handled by the sass-extract-loader by default.
{
  module: {
    loaders: [
      {
        test: /\.runtime\.scss$/,
        loader: 'sass-extract-loader'
      }
    ]
  }
}

The resulting module will be a plain JSON object containing the extracted variables and their values. For detailed documentation on the structure and semantics of the response head over to the documentation for sass-extract.

Options

All options available for node-sass can be passed to the loader with any of the available methods for webpack.
An example is including a path for resolving imports such as const styleVariables = require('sass-extract-loader?{"includePaths": ["./foobar"]}!./style.scss');.

Plugins

Plugins can be used by passing plugin module names in the query options to the loader const styleVariables = require('sass-extract-loader?{"plugins": ["minimal"]}!./style.scss');.

Examples

Head over to the examples section to see available examples. Simply clone this repository and follow the simple instructions within each example directory to try them out.

Requirements

  • node-sass >= 3.8.0
  • node >= 4

Contributing

Running tests
npm test
Commits
In order to have readable commit messages and the ability to generate a changelog the commit messages should follow a certain structure.
To make it easier install npm install -g commitizen and commit using git-cz.
Generate changelog using npm install -g conventional-changelog and npm run changelog.
Releasing new versions
  1. Make changes
  2. Commit those changes
  3. Set new version in package.json
  4. npm run changelog
  5. Commit package.json and CHANGELOG.md files
  6. Tag
  7. Push