Question

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

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

我这样配置了browserslist文件：

 var baseIp = "http://182.180.106.200:3000/";

 axios.post(`${baseIp}/signin`, params, {
                headers: {
                    "content-type": "application/json",
                },
            })
            .then(async function(response) {
                console.log(response);
                let token = response.data.token;
                let userName = response.data.name;
                let email = response.data.email;
                let address = response.data.address;

                await AsyncStorage.setItem("token", token);
                await AsyncStorage.setItem("username", userName);
                await AsyncStorage.setItem("email", email);
                await AsyncStorage.setItem("address", address);

                Actions.main_menu();
            })
            .catch(function(error) {
                console.log(error);
                alert("Server Side Error");
            });

我添加了一个控件注释，以启用Autoprefixer的网格功能：

> 1%
IE 11

（我已经在两个CSS文件，全局样式和组件样式中做到了这一点）

我对浏览器列表的这种配置以及CSS文件中的控件注释的期望是，Autoprefixer将/* autoprefixer grid: on */添加到CSS输出中。但事实并非如此。

Answer 1

我不知道它的配置在角度CLI中应该如何。但是在Webpack loader中，它的配置如下：

// 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在Angular 8项目中为CSS网格添加前缀

1 个答案: