Sass Vars Loader
Import Sass vars from Webpack config or from JS/JSON files
This loader allows you to use Sass variables defined in:
Supports both syntax types:
Supports hot reload:
Install
using npm
npm install @epegzz/sass-vars-loader --save-devusing yarn
yarn add @epegzz/sass-vars-loader --devUsage
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);
}
