- Nodejs >= 4.0
- Webpack for module bundling
Setting up Webpack config
rules:test: /\.scss$/use:loader: "style-loader"loader: "css-loader"loader: "sass-loader"loader: "js-to-styles-var-loader"
rules:test: /\.less$/use:loader: "style-loader"loader: "css-loader"loader: "less-loader"loader: "js-to-styles-var-loader"
Let's assume we would like to store some variable data in a module like this:
// colors.jsconst colors ='fancy-white': '#FFFFFE''fancy-black': '#000001';moduleexports = colors;
You can use this module in your favorite templates / frameworks etc., and you don't want to repeat yourself when using these colors in a sass file as variable (e.g.
$fancy-white: #FFFFFE; /*...*/ background-color: $fancy-white). In this situation just require your module in the beginning of your sass module:
// ...}// ...
The form of the required data is important: it must be an object with key/values pair, the key will be the name of the variable.
The js-to-styles-var-loader transforms this sass file and provides it in the following form for the sass-loader:
$fancy-white: #FFFFFE;$fancy-black: #000001;some-classbackground-color: $fancy-white
You can import from named exports and properties of those, although the value of these must still be a flat list:
// themes.jsmoduleexports =themes:blue_theme:some_color: "#00f"red_theme:some_color: "#f00"default:some_color: "#aaa";
Variables definitions are inserted into your sass/less file in place of the
require() statement, so you can override variables inside blocks:
require"themes.js".default;.someThingcolor: @some_color;.theme-bluerequire"themes.js".themes.blue_theme;.someThingcolor: @some_color;
You can try the loader via a small fake app in the
cd demonpm inpm run demo
The webpack dev server serves the app on
localhost:8030. In the app we share data between js, less and sass modules.
Run tests with
npm test or
npm run test:watch.
The transformer is developed with tdd, so if you would like to contribute, please, write your tests for your new functionality, and send pull request to integrate your changes.