How to use global variables in CSS-Modules?
Check this out
//vars.css
:root {
--color-black: #222;
}
//myComponent.module.css
@import './vars.css';
.component{
color: var(--color-black);
}
The CSS-Modules documentation mentions variables here: https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md
With this you can import variables as so:
@value colors: "../../main/colors.css";
@value primary, secondary, tertiary from colors;
which can be used in your css:
.main {
background-color: tertiary;
border-top: 30px solid primary;
}
To make this work postcss-loader
and postcss-modules-values
need to be added to your webpack config. See below:
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: [postcssModulesValues]
}
}
]
}