Loader to use config.json file as css variables
MIT License
Loader to use config.json file as css variables. This puts the declaration at the end of your base css file. This is based on what the less-loader is using for setting the less-option modify vars. See --modify-var less cli command for more information.
lessc --modify-var
To begin, you'll need to install @stijnvanhulle/css-vars-loader
:
$ npm install @stijnvanhulle/css-vars-loader --save-dev
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: `@stijnvanhulle/css-vars-loader`,
options: { ...options },
},
],
},
],
},
};
And run webpack
via your preferred method.
modifyVars
Type: modifyVars
Default: undefined
Object with all colours you wan to use as css variables
webpack.config.js
module.exports = {
module: {
rules: [
{
loader: `@stijnvanhulle/css-vars-loader`,
options: {
modifyVars: {
'primary-color': 'blue',
},
},
},
],
},
};
file
Type: file
Default: undefined
The file where you want to append the css variables, see ResourcePath for path format
webpack.config.js
module.exports = {
module: {
rules: [
{
loader: `@stijnvanhulle/css-vars-loader`,
options: {
modifyVars: {
'primary-color': 'blue',
},
file: Path.resolve('./css/global.css'),
},
},
],
},
};
config.js
{
"primary-color": "#000"
}
global.css
html {
background: white;
}
webpack.config.js
module.exports = {
module: {
rules: [
{
loader: `@stijnvanhulle/css-vars-loader`,
options: {
modifyVars: require('./config.js'),
file: Path.resolve('./global.css'),
},
},
],
},
};
bundle.css
html {
background: white;
}
:root {
--primary-color: #000;
}
Please take a moment to read our contributing guidelines if you haven't yet done so.