如何告诉 Autoprefixer 在 Angular 8 项目中为 CSS 网格添加前缀答案

【问题标题】：How to tell Autoprefixer to prefix CSS grid in an Angular 8 project如何告诉 Autoprefixer 在 Angular 8 项目中为 CSS 网格添加前缀
【发布时间】：2019-07-18 15:50:21
【问题描述】：

我必须在我们使用最新版本的 Angular 项目中支持 IE 11。我真的很喜欢使用 IE 11 能够提供的 CSS 网格功能。但我不知道如何让 Autoprefixer 正常工作。

我的问题与another question 中的问题完全相同，但涉及另一个版本。

我创建了一个最小的test case on Stackblitz。

我这样配置 browserslist 文件：

> 1%
IE 11

我添加了一个控制注释来启用 Autoprefixer 的网格功能：

/* autoprefixer grid: on */

（我在 CSS 文件、全局样式和组件样式中都这样做了）

我对 browserslist 的这种配置和 CSS 文件中的控制注释的期望是，Autoprefixer 在 CSS 输出中添加 display: -ms-grid;。但事实并非如此。

【问题讨论】：

在最新版本的 Angular 8 中，此设置似乎再次起作用。不幸的是，我无法让它在 Stackblitz 中工作，因为它与最新版本的 core-js 存在问题。

标签： angular css-grid autoprefixer

【解决方案1】：

我不知道它的配置在 Angular CLI 中应该如何。但在 Webpack 加载器中，它的配置如下：

// postcss.config.js

module.exports = {
    plugins: {
        'postcss-preset-env': {
            autoprefixer: {
                grid: 'autoplace'
            },
            browsers: [
                'IE >= 11',
                '> 0.1%'
            ]
        }
    }
};

设置grid: 'autoplace' 太重要了，而不是grid: 'on'。在 package.json 的 Angular 项目中，您可以添加 AUTOPREFIXER_GRID=autoplace。它会是这样的：

"build": "AUTOPREFIXER_GRID=autoplace ng build",

我们最近在project 之一中使用了网格，我们还支持 IE11。希望 autoprefixer 拯救了我们。所以请确保，如果您正确配置它，它肯定会起作用。

【讨论】：