如何为Angular 7添加额外的postCSS插件（postcss-preset-env）

Question

我最近开始实现CSS自定义属性但需要支持IE11 - 因此需要postcss-preset-env。 到目前为止，我发现Angular的webpack配置不是很可定制，但我已经安装了自定义webpack（ https://www.npmjs.com/package/@angular-builders/custom-webpack ）。

如何设置配置文件以包含和配置postcss-preset-env插件以正确填充我的CSS自定义属性以在所有浏览器中工作？ 我希望用postcss-preset-env编译任何CSS文件和Angular组件样式。 到目前为止，我已经创建了一个custom-webpack.config.js文件，其中包含以下内容：

const postcss = require('postcss-loader');
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcss([
      postcssPresetEnv()
    ]).process()
  ]
}

我还更新了angular.json构建属性以引用此文件。

Answer 1

请遵循以下教程： https ： //medium.com/@jontorrado/working-with-webpack-4-es6-postcss-with-preset-env-and-more-93b3d77db7b2

的WebPack / loaders.js

const CSSLoader = {
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: __dirname + '/postcss.config.js'
        }
      },
    },
  ],
};

module.exports = {
  CSSLoader: CSSLoader
};

的WebPack / postcss.config.js

module.exports = {
  plugins: {
    'postcss-preset-env': {
      browsers: 'last 2 versions',
    }
  },
};

的WebPack / webpack.config.js

module.exports = {
  ...
  module: {
    rules: [
      loaders.CSSLoader
    ]
  }
};