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

Use vars in your SCSS files provided via Webpack

This loader allows you to load Sass variables from:

JSON files
Javascript files
Inlined in your Webpack config file

Install

npm install @epegzz/sass-vars-loader --save-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: {
          // 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: {
          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: {
          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);
}