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')()
  ]
}

PostCSS-cssnext不编译CSS输入

1 个答案: