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