如何为 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
    ]
  }
};