在webpack上支持autoprefixer的CSS网格

Question

我正在使用带有postcss和webpack的autoprefixer进行项目。我也在使用CSS网格。但是，我注意到在构建代码时，css网格的ms前缀不起作用。

这是我的postcss.config.js，适用于诸如flexbox之类的东西。

如何启用CSS网格支持？

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Answer 1

默认情况下，autoprefixer不会为网格属性添加前缀。

请参阅autoprefixer documentation:

  

Autoprefixer有4个功能，可以启用或禁用   选项：

     

...

     

grid：true将为IE启用网格布局前缀。

设置options的语法如下所示：

const autoprefixer = require('autoprefixer');
const plugin = autoprefixer({ grid: true });
module.exports = { plugins: [ plugin ] }

话虽如此，MDN对于网格属性的autoprefixer有这个说法：

  

流行的工具autoprefixer已更新为支持-ms-   使用新网格属性时的网格版本。除非你的布局   是非常简单的基于行的放置，这可能会让你更多   它解决的问题。我不建议让autoprefixer运行   在网格属性上，而是使用IE版本编写版本   网格布局，如果它对你有用。

此外，Rachel Andrew在这个主题上写了a thorough post

在该帖子中，她注意到以下内容：

  

...即使在两个版本中存在类似属性的地方   规范，旧规范和实现的功能   与新的非常不同。这意味着你不能简单地运行   Autoprefixer并考虑完成的工作。