PostCSS-cssnext不编译CSS-input

Question

我有一个postcss-cssnext的问题:它没有按照我期望的方式编译我的CSS。

这是我的CSS-input：

:root {
  --bgcolor: #fbc547;
}

body {
  background-color: var(--bgcolor);
}

不幸的是，输出看起来是完全一样的--但是我希望是这样的：

body {
  background-color: #fbc547;
}

为了更好地理解，下面是我的webpack.config.js的样子：

module: {
  rules: [
    {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'postcss-loader'
      ]
    }
  ]
}

下面是我的postcss.config.js：

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

Postcss-cssnext版本是2.11.0。我猜一般的设置是有效的，因为在CSS-Output中正确地应用了供应商前缀。

我对Webpack和Postcss比较陌生。事实上，这是我第一次真正尝试使用它。所以我希望你们能帮助我:)

Answer 1

使用require时，您必须调用该函数。因此，您的配置应如下所示：

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