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

Posted 2023-03-05

【中文标题】如何为 Angular 7 包含额外的 postCSS 插件（postcss-preset-env）

【英文标题】：How to include additional postCSS plugins (postcss-preset-env) for Angular 7

【发布时间】：2019-10-25 10:12:40

【问题描述】：

我最近开始实现 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 构建属性以引用此文件。

【问题讨论】：

你检查过这个doc 吗？

【参考方案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
    ]
  
;

【讨论】：

这会做什么？

我相信您的答案中概述的步骤适用于一般的 webpack 使用，而问题是关于 Angular 和向 Angular 添加额外的插件。如何更改这些步骤以适应 Angular 和 Angular 的自定义 webpack (npmjs.com/package/@angular-builders/custom-webpack)？