0

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 :)

Patrick
  • 1
  • 2

1 Answers1

0

When using require, you have to call the function. Thus your config should look like:

module.exports = {
  plugins: [
    require('postcss-smart-import')(),
    require('postcss-cssnext')()
  ]
}