PostCSS CSSNext webpack 2で@mediaとcolor（）が動作しない

Question

webpack 1から2にプロジェクトをアップグレードしていて、postcss-cssnextでいくつかの奇妙な動作が見られます。次の機能、特に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

この変更（1.3.x）には、おそらくpostcss-loaderが責任を負います。 docによると、 "plugins"オプションには関数を使うべきです。 または、配列を使用するが、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', 
     ] 
     } 
    ] 
    } 
}