![dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?v=4&size=40){kind=avatar}
A webpack loader that exposes CSS customs to JavaScript.
yarn add css-customs-loader postcss-loader postcss-preset-env
You need to add css-customs-loader before css-loader:
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-customs-loader'
// defaults
options: {
onlyLocals: false,
},
},
'css-loader?importLoaders=1',
'postcss-loader',
],
},
],
},
}css-customs-loader detects any valid PostCSS configuration (including options passed to postcss-loader!), so let's create one. importFrom will point to a global.css file containing our customs and, for the sake of this example, we'll enable all features related to CSS customs:
// postcss.config.js
module.exports = {
plugins: {
'postcss-preset-env': {
importFrom: 'src/global.css',
features: {
'custom-properties': true, // already enabled by default
'custom-media-queries': true,
'custom-selectors': true,
},
},
},
}This option should be enabled in situations like pre-rendering. You should combine it with onlyLocals option in css-loader v2 or css-loader/locals loader in css-loader v1. (Don't use style-loader when pre-rendering.)
See usage instructions in the main readme.