I have a problem with postcss-cssnext: It does not compile my CSS the way I expect it to.
This is my CSS-input:
:root {
--bgcolor: #fbc547;
}
body {
background-color: var(--bgcolor);
}
Unfortunately the output looks exactly the same — however I’m expecting something like this:
body {
background-color: #fbc547;
}
For better understanding, here is what my webpack.config.js looks like:
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
}
And here my postcss.config.js:
module.exports = {
plugins: [
require('postcss-smart-import'),
require('postcss-cssnext')
]
}
Postcss-cssnext version is 2.11.0. I guess the general setup is working since vendor-prefixes are correctly applied in the CSS-Output.
I’m relatively new to Webpack and Postcss. In fact this is my first real attempt using it. So I hope you guys can help me out :)