PostCSS CSSNext @media和color（）不能與webpack 2

Question

我正在升級一個項目從webpack 1到2，並看到一些奇怪的行爲postcss-cssnext其中一些CSS的下一個功能，最顯着的是color()函數和我所有的@media查詢只是不工作了。

我的帶有webpack 2的webpack配置看起來像這樣。我在這裏做錯了什麼？

{ 
    test: /\.css$/, 
    use: [ 
    { 
     loader: 'style-loader' 
    }, 
    { 
     loader: 'css-loader', 
     options: { 
     localIndentName: 'localIdentName=[name]__[local]___[hash:base64:5]', 
     sourceMap: true, 
     modules: true, 
     importLoaders: 1 
     } 
    }, 
    { 
     loader: 'postcss-loader', 
     options: { 
     plugins: [ 
      postcssImport({ path: './app/css/common' }), 
      postcssCssnext({ browsers: ['> 1%', 'last 2 versions'] }), 
      postcssReporter({ clearMessages: true }) 
     ] 
     } 
    } 
    ] 
} 

Answer 1

postcss-loader可能負責此更改（1.3.x）。 根據文檔，你應該使用「插件」選項的功能。 或者使用一個數組，但是在postcss.config.js文件中。

module.exports = { 
    module: { 
    rules: [ 
     { 
     test: /\.css/, 
     use: [ 
      … 
      { 
      loader: 'postcss-loader', 
      options: { 
       plugins: function() { 
       return [ 
        postcssImport({ path: './app/css/common' }), 
        postcssCssnext({ browsers: ['> 1%', 'last 2 versions'] }), 
        postcssReporter({ clearMessages: true }) 
       ]; 
       } 
      } 
      } 
     ] 
     } 
    ] 
    } 
} 

或經由postcss.config.js

module.exports = { 
    plugins: [ 
    postcssImport({ path: './app/css/common' }), 
    postcssCssnext({ browsers: ['> 1%', 'last 2 versions'] }), 
    postcssReporter({ clearMessages: true }) 
    ] 
} 

（和在的WebPack）

module.exports = { 
    module: { 
    rules: [ 
     { 
     test: /\.css/, 
     use: [ 
      … 
      'postcss-loader', 
     ] 
     } 
    ] 
    } 
}