1.0.2 • Public • Published

    Build Status Coverage Status

    This project is not maintained any more. Please try the js-to-styles-var-loader, which is a more flexible loader, it handles Less, too.


    A Webpack loader to share data for sass variables between javascript modules and sass files

    This loader is for that special case when you would like to import data from a javascript module into a sass file. The sass loader complains, because importing js module is not a valid sass instruction.

    The loader only handles the case when you want to inject sass variables into a sass file via a javascript module.


    • Nodejs >= 4.0
    • sass for css pre-processing
    • Webpack for module bundle

    Setting up Webpack config

    Probably you use sass-loader with Webpack. The usage in this case is pretty simple: just put this loader before sass-loader in your webpack config:

      rules: [
        test: /\.sass$/,
        use: [
            loader: "style-loader"
            loader: "css-loader"
            loader: "sass-loader"
            loader: "js-to-sass-var-loader"


    Let's assume we would like to store some variable data in a module like this:

    // colors.js
    const colors = {
      'fancy-white': '#FFFFFE',
      'fancy-black': '#000001'
    module.exports = 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:

    // ...
    .some-class {
      background-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 sass variable.


    You can use other require form (require('relative/path/to/module').someProperty), too.


    You can try the loader via a small fake app in the demo folder:

    cd demo
    npm i
    npm run demo

    The webpack dev server serves the app on localhost:8030. In the app we share data between js 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.


    npm i js-to-sass-var-loader

    DownloadsWeekly Downloads






    Last publish


    • tompascall