/jsontosass-loader

Json-to-Sass variable loader for Webpack

Primary LanguageJavaScript

json to sass loader for webpack

Installation

npm install jsontosass-loader --save-dev

Usage

Documentation: Using loaders

Example config

var sassGlobals = require('[YourVars.json file]');
var sassVars = JSON.stringify(sassGlobals);
// => returns [YourVars.json file] content as string
var webpackConfig = {
    module: {
        loaders:[
            {test: /.scss$/, loader: "style!css!sass!jsontosass?" + sassVars}
        ]
    },
}

Input [YourVars.json file]

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

Output SCSS

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

CSS Modules config

{ test: /\.scss$/, loader: ExtractTextPlugin.extract(
        "style-loader",
        "css-loader?minimize&sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"+
        "!postcss-loader" +
        "!sass-loader?sourceMap"+
        "!jsontosass?"+ sassVars) 
},

Forked from gist: jsonToSassVars and prepend-loader

License

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