@epegzz/sass-vars-loader

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@epegzz/sass-vars-loader
119206.1.0a year ago6 years agoMinified + 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

<img alt="Travis" src="https://img.shields.io/travis/epegzz/sass-vars-loader.svg?style=flat-square">
<img alt="Maintainability" src="https://img.shields.io/codeclimate/maintainability/epegzz/sass-vars-loader.svg?style=flat-square">
<img alt="Codecov" src="https://img.shields.io/codecov/c/github/epegzz/sass-vars-loader.svg?style=flat-square">
<img alt="npm version" src="https://img.shields.io/npm/v/@epegzz/sass-vars-loader.svg?style=flat-square">
<img alt="npm installs" src="https://img.shields.io/npm/dm/@epegzz/sass-vars-loader.svg?style=flat-square">
<img alt="dependencies" src="https://img.shields.io/david/epegzz/sass-vars-loader.svg?style=flat-square">

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