【问题标题】：Webpack: postcss-loader is ignoring config fileWebpack：postcss-loader 忽略配置文件
【发布时间】：2018-07-20 08:16:56
【问题描述】：

目前我有以下 webpack 配置，效果很好：

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ],
        flexbox: 'no-2009',
      }),
    ],
  },
},

由于我在多个地方都使用了 postcss 配置，因此我想将其集中在一个 postcss.config.js 文件中。

我的 webpack 配置变为：

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    config: {
      path: './postcss.config.js'
    },
  },
}

我的 postcss.config.js 文件位于同一配置文件夹中，如下所示：

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'autoprefixer': {
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9', // React doesn't support IE8 anyway
      ],
      flexbox: 'no-2009',
    }
  }
}

现在构建仍在工作，但似乎 postcss 配置被忽略（当我检查 css 时，供应商前缀不再存在）。我在这里错过了什么吗？ postcss 文档不是很有帮助...

【问题讨论】：

你试过没有路径声明吗？如果您的 postcss.config.js 与 webpack 配置位于同一目录中，它应该默认检测到它。
@Dyo 是的，我也试过了，但无济于事。
你还在 webpack 中声明 loader: require.resolve('postcss-loader') 对吧？
是的（我刚刚编辑了我的帖子）
同样的问题，postcss github config 没用

标签： reactjs webpack postcss autoprefixer postcss-loader

【解决方案1】：

试试这些：

先在webpack:

{
  loader: 'postcss-loader',
  options: {
    config: {
      path: `${__dirname}/postcss.config.js`,
    },
  },
}

然后在您的postcss.config.js 文件中：

module.exports = {
  ident: 'postcss',
  syntax: 'postcss-scss', /*install "postcss-scss" for SCSS style */
  map: false, /*its depends on your choice*/
  plugins: {
    'postcss-flexbugs-fixes': {},
    'autoprefixer': {
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9',
      ],
      flexbox: 'no-2009',
    }
  }
}

这对我有用。如果有问题tell me

【讨论】：