2

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

4

1 回答 1

5

试试这些：

首先在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',
    }
  }
}

这对我有用。如果有问题告诉我

于 2018-04-27T01:36:01.643 回答