css-vars-loader 1.0.14
Install from the command line:
Learn more about npm packages
$ npm install @stijnvanhulle/css-vars-loader@1.0.14
Install via package.json:
"@stijnvanhulle/css-vars-loader": "1.0.14"
About this version
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-varTo begin, you'll need to install @stijnvanhulle/css-vars-loader:
$ npm install @stijnvanhulle/css-vars-loader --save-devwebpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: `@stijnvanhulle/css-vars-loader`,
options: { ...options },
},
],
},
],
},
};And run webpack via your preferred method.
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',
},
},
},
],
},
};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.
