在 Webpack 2 中使用 extractTextPlugin 和 postCss 插件答案

【问题标题】：Use extractTextPlugin and postCss plugins in Webpack 2在 Webpack 2 中使用 extractTextPlugin 和 postCss 插件
【发布时间】：2017-03-06 18:07:54
【问题描述】：

我正在从 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 插件（嵌套、自动前缀、值）。 Webpack 2 不再支持自定义属性，建议使用options。

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

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

【问题讨论】：

标签： webpack postcss

【解决方案1】：

建议使用postcss.config.js 文件，该文件使用选项导出对象（请参阅Postcss usage）。您的配置将如下所示（省略导入语句）：

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

但是如果你愿意，你可以直接在webpack config中指定（如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: [...]
},

请注意，选项位于加载程序本身，而不是整个规则。

【讨论】：