using npm
npm install @epegzz/sass-vars-loader --save-devusing yarn
yarn add @epegzz/sass-vars-loader --devLook at the Example Webpack Config File to see how to use this loader in conjunction with style-loader and css-loader
// 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')
}
};// 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')
}
};// 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')
}
};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);
}
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent