试试这些：

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忽略了配置文件

1 个答案:

试试这些：