@epegzz/sass-vars-loader

A SASS vars loader for Webpack. Load global SASS vars from JS/JSON/Typescript files or from Webpack config.

Stats

stars šŸŒŸissues āš ļøupdated šŸ› created šŸ£size šŸ‹ļøā€ā™€ļø
11510Jun 11, 2021Aug 21, 2016Minified + gzip package size for @epegzz/sass-vars-loader in KB

Readme

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);
    }
    

    If you find any bugs or have a feature request, please open an issue on github!

    The npm package download data comes from npm's download counts api and package details come from npms.io.