Skip to content
This repository has been archived by the owner on Dec 18, 2018. It is now read-only.

nordnet/sass-variable-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

$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:

{
  grayBase: '#000',
  grayDarker: '#222222',
  grayDark: '#333333',
  gray: '#555555',
  grayLight: '#777777',
  grayLighter: '#eeeeee'
}

Installation

npm install --save-dev sass-variable-loader

Usage

import variables from '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 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.

preserveVariableNames

import variables from '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)

About

Sass variable loader for webpack

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •