Package Exports

@epegzz/sass-vars-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@epegzz/sass-vars-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Sass Vars Loader

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

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