2017-06-02 73 views
0

我有一個postcss-cssnext的問題:它不按我期望的方式編譯我的CSS。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比較陌生。事實上,這是我第一次嘗試使用它。所以我希望你們能幫助我:)

回答

0

當使用require時,您必須調用該函數。因此,您的配置應如下所示:

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