js-to-styles-var-loader, which is a more flexible loader, it handles Sass, too.This project is not maintained any more. Please try the
- Nodejs >= 6.0
- Less for css pre-processing
- Webpack for module bundle
- Install js-to-less-var-loader npm package into your project:
npm i --save js-to-less-var-loader
Setting up Webpack config
Probably you use less-loader with Webpack. The usage in this case is pretty simple: just put this loader before less-loader in your webpack config:
rules:test: /\.less$/use:loader: "style-loader"loader: "css-loader"loader: "less-loader"loader: "js-to-less-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 less file as variable (e.g.
@fancy-white: #FFFFFE; /*...*/ background-color: @fancy-white). In this situation just require your module in the beginning of your less module:
;// ...some-classbackground-color: @fancy-white// ...
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 less variable.
You can use other require form (
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.