Webpack：postcss-loader 忽略配置文件

Question

目前我有以下 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 文档不是很有用...

Answer 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

Webpack：postcss-loader 忽略配置文件

Webpack: postcss-loader is ignoring config file

reactjs

webpack

postcss

autoprefixer

postcss-loader

试试这些：