Question

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

如何设置配置文件以包括并配置postcss-preset-env插件，以正确地填充我的CSS自定义属性，使其在所有浏览器中都能正常工作？我希望所有CSS文件以及Angular组件样式都可以使用postcss-preset-env进行编译。到目前为止，我已经使用以下命令创建了一个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
    ]
  }
};

如何为Angular 7包含其他postCSS插件（postcss-preset-env）

1 个答案: