I've got a project which has a set of css files (one for each react component). I'm using the css-loader (with modules on) in webpack and also postcss-cssnext.
Ideally i want a single variables.css
so i can share variables across the css files. I've tried having variables.css
containing something like:
:root {
--gutter-width: 1rem;
--outer-margin: 2rem;
...
}
which i then import so it goes through the css loader. The problem is, other files don't pick up on these variables, so either this doesn't work or i'm doing something wrong (including this in the component css file directly does work).
One thing that does work is having a styles.json
file with the following webpack setup:
postcss: function (webpack) {
return [
...
require("postcss-cssnext")({
features: {
customProperties: {
variables: require('./src/styles.json')
}
}
})
...
]
}
The main problem with this though is every time i change a variable i have to restart the webpack dev server (so reloading the webpack config). This isn't ideal.
So, any thoughts on a better way to do this?