在Webpack 2中使用extractTextPlugin和postCss插件

Question

我正在从webpack v1迁移到v2。我跟着官方文档更新webpack.config.js：

... 
module: { 
    rules: [ 
     { 
      test: /\.css$/, 
      use: extractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: [ 
        'css-loader?modules&localIdentName=[path][name]_[local]--[hash:base64:8]', 
        'postcss-loader' 
       ], 
      }), 
      exclude: [...] 
     }, 
     { 
      test: /\.css$/, 
      use: extractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: 'css-loader', 
      }), 
      include: [...] 
     } 
    ] 
}, 
... 
/** 
* postcss: [ 
* nested(), 
* autoprefixer(), 
* values 
* ] 
*/ 

我的问题是postcss插件（嵌套，autoprefixer，值）。 Webpack 2不再支持自定义属性，并建议使用options。

我尝试了options和plugins:() => [nested, autoprefixer, values]，但无法使其工作。

这样做的正确方法是什么？谢谢。

Answer 1

建议使用postcss.config.js文件，该文件导出带有选项的对象（请参阅Postcss usage）。你的配置是这样的（省略import语句）：

module.exports = { 
    plugins: [ 
    nested(), 
    autoprefixer(), 
    values 
    ] 
} 

但是，如果你愿意，你可以在的WebPack配置（如Postcss options所示）直接指定：

{ 
    test: /\.css$/, 
    use: extractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
     'css-loader?modules&localIdentName=[path][name]_[local]--[hash:base64:8]', 
     { 
     loader: 'postcss-loader', 
     options: { 
      plugins:() => [nested(), autoprefixer(), values] 
     } 
     } 
    ] 
    }) 
    exclude: [...] 
}, 

注这些选项在加载器本身上，而不是整个规则。