UNPKG

dart-sass-variable-loader

Version:

Sass variable loader module for webpack (dart)

55 lines (41 loc) 1.76 kB
# Sass variable loader for webpack > Parses your Sass variables and returns an object containing each variable camelCased and the end value as it would be in CSS. > > That means full support for Sass' lighten, darken, mix etc. **Input:** ``` scss $gray-base: #000 !default; $gray-darker: lighten($gray-base, 13.5%) !default; // #222 $gray-dark: lighten($gray-base, 20%) !default; // #333 $gray: lighten($gray-base, 33.5%) !default; // #555 $gray-light: lighten($gray-base, 46.7%) !default; // #777 $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee ``` **Result:** ``` javascript { grayBase: '#000', grayDarker: '#222222', grayDark: '#333333', gray: '#555555', grayLight: '#777777', grayLighter: '#eeeeee' } ``` ## Installation `npm install --save dart-sass-variable-loader` ## Usage ``` javascript import variables from '!!dart-sass-variable-loader!./_variables.scss'; // => returns all the variables in _variables.scss as an object with each variable name camelCased ``` **Note:** If you've already defined loaders for Sass files in the configuration, you can override the [loader order](https://webpack.github.io/docs/loaders.html#loader-order) by writing `!!sass-variable-loader!./_variables.scss` to disable all loaders specified in the configuration for that module request. ## Options You can pass options to the loader via [query parameters](http://webpack.github.io/docs/using-loaders.html#query-parameters). ### preserveVariableNames ``` javascript import variables from 'dart-sass-variable-loader?preserveVariableNames!./_variables.scss'; // => returns all the variables in _variables.scss as an object with each variable name left intact ``` ## License MIT (http://www.opensource.org/licenses/mit-license.php)