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