Skip to content

Use Sass variables defined in Webpack config or in external Javascript or JSON files

License

Notifications You must be signed in to change notification settings

epegzz/sass-vars-loader

Repository files navigation

Sass Vars Loader

Import Sass vars from Webpack config or from JS/JSON files

Travis Maintainability Codecov npm version npm installs dependencies

This loader allows you to use Sass variables defined in:
  • ✅ JSON Files
  • ✅ JavaScript Files
  • ✅ Inlined in Webpack Config
  • Supports both syntax types:
  • ✅ SASS Syntax
  • ✅ SCSS Syntax
  • Supports hot reload:
  • ✅ HMR Enabled

  • Install

    using npm

    npm install @epegzz/sass-vars-loader --save-dev

    using yarn

    yarn add @epegzz/sass-vars-loader --dev

    Usage

    Look at the Example Webpack Config File to see how to use this loader in conjunction with style-loader and css-loader

    Option 1: Inline Sass vars in the webpack config

    // styles.css:
    
    .some-class {
      background: $greenFromWebpackConfig;
    }
    // webpack.config.js
    
    var path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      module: {
        rules: [{
          test: /\.scss$/,
          use: [
            // Inserts all imported styles into the html document
            { loader: "style-loader" },
    
            // Translates CSS into CommonJS
            { loader: "css-loader" },
    
            // Compiles Sass to CSS
            { loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },
    
            // Reads Sass vars from files or inlined in the options property
            { loader: "@epegzz/sass-vars-loader", options: {
              syntax: 'scss',
              // Option 1) Specify vars here
              vars: {
                greenFromWebpackConfig: '#0f0'
              }
            }
          }]
        }]
      },
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

    Option 2: Load Sass vars from JSON file

    // config/sassVars.json
    
    {
      "purpleFromJSON": "purple"
    }
    // styles.css:
    
    .some-class {
      background: $purpleFromJSON;
    }
    // webpack.config.js
    
    var path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      module: {
        rules: [{
          test: /\.scss$/,
          use: [
            // Inserts all imported styles into the html document
            { loader: "style-loader" },
    
            // Translates CSS into CommonJS
            { loader: "css-loader" },
    
            // Compiles Sass to CSS
            { loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },
    
            // Reads Sass vars from files or inlined in the options property
            { loader: "@epegzz/sass-vars-loader", options: {
              syntax: 'scss',
              files: [
                // Option 2) Load vars from JSON file
                path.resolve(__dirname, 'config/sassVars.json')
              ]
            }
          }]
        }]
      },
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

    Option 3: Load Sass vars from JavaScript file

    // config/sassVars.js
    
    module.exports = {
      blueFromJavaScript: 'blue'
    };
    // styles.css:
    
    .some-class {
      background: $blueFromJavaScript;
    }
    // webpack.config.js
    
    var path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      module: {
        rules: [{
          test: /\.scss$/,
          use: [
            // Inserts all imported styles into the html document
            { loader: "style-loader" },
    
            // Translates CSS into CommonJS
            { loader: "css-loader" },
    
            // Compiles Sass to CSS
            { loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },
    
            // Reads Sass vars from files or inlined in the options property
            { loader: "@epegzz/sass-vars-loader", options: {
              syntax: 'scss',
              files: [
                // Option 3) Load vars from JavaScript file
                path.resolve(__dirname, 'config/sassVars.js')
              ]
            }
          }]
        }]
      },
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

    Pro Tip: Using objects as Sass vars!

    Use map_get in order to use objects as Sass vars:

    // config/sassVars.js
    
    module.exports = {
      lightTheme: {
        background: 'white',
        color: 'black'
      },
      darkTheme: {
        background: 'black',
        color: 'gray'
      }
    };
    // styles.css:
    
    $theme: $lightTheme;
    
    .some-class {
      background: map_get($theme, background);
      color: map_get($theme, color);
    }