webpack - PostCSS-cssnext 不编译 CSS 输入

Question

我对 postcss-cssnext 有疑问：它没有按照我期望的方式编译我的 CSS。

这是我的 CSS 输入：

: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 输出中。

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

Answer 1

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

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