@epegzz/sass-vars-loader

Sass Vars Loader

Use external vars in your SCSS files

This loader allows you to load Sass variables from:

• JSON files
• Javascript files
• Inlined in your Webpack config file

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