Fork of Edward Irby's jsontosass-loader

JSON to Sass loader for Webpack

This loader converts your JSON or module.export'ed JS variables into SCSS variables.

Installation

npm install sass-json-loader --save-dev

Usage

Add this to loader after sass-loader in your Webpack configuration file:

var sassVars = 'path/to/your/vars.json';

module.exports = {
    /* ... */
    {
        test: /\.scss$/,
        loader: extractMain.extract({
            fallback: 'vue-style-loader',
            use: [
                'css-loader',
                'sass-loader',
                {
                    loader: 'sass-json-loader',
                    options: { path: sassVars }
                }
            ]
        })
    },
    /* ... */
}

Input [YourVars.json file]

{
"breakpoints":{
    "portraitS": "320px",
    "portraitM": "360px",
    "portraitL": "414px",
  },
  "localNavHeight":"50px",
}

OR

[YourVars.js file]

{
module.exports = {
	breakpoints: {
		portraitS: '320px',
		portraitM: '360px',
		portraitL: '414px'
	},
	deepObject: {
		a: {
			b: 'c'
		}
	}
};

Output SCSS

$breakpoints:(portraitS:320px,portraitM:360px,portraitL:414px);
$localNavHeight:50px;

Originally forked from gist: jsonToSassVars and prepend-loader

License

MIT (http://www.opensource.org/licenses/mit-license.php)