Package Exports

@epegzz/sass-vars-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@epegzz/sass-vars-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A SASS vars loader for Webpack

Load global SASS vars from JS/JSON files or from Webpack config.

Install

npm install @epegzz/sass-vars-loader --save-dev

Usage with passing vars directly in webpack config

Simply pass the SASS vars as plain JS object to the sassVars config property:

// webpack.js
loader: ExtractTextPlugin.extract('style', 'css!sass!@epegzz/sass-vars-loader')
sassVars: {
  vars: {
    breakpoints: {
      small: '300px',
      medium: '600px'
    }
    colors: {
      error: 'red'; 
    }
  }
}

Usage with loading vars from JS or JSON files

Pass filenames as array to the sassVars config object:

// webpack.js
loader: ExtractTextPlugin.extract('style', 'css!sass!@epegzz/sass-vars-loader')
sassVars: {
  files: [
    path.resolve(__dirname, '/path/to/breakpoints.js'), // JS
    path.resolve(__dirname, '/path/to/colors.json'), // JSON
  ]
}

With breakpoints.js:

const breakpoints = {
  small: '300px',
  medium: '600px',
}
module.exports = { breakpoints };

And colors.json:

{
  "colors": {
    "error": "red"
  }  
}

This will result in the following SASS vars being available in all SASS files:

$breakpoints: (
  small: 300px,
  medium: 600px,
);

$colors: (
  error: red,
);

Acknowledgments

SASS var generator shamelessly copied from Kasu/jsonToSassVars.js