SCSS.-ms-prefix在CSS文件中导致错误。在CSS文件中，-ms-prefix导致错误。

Question

我使用的是 实时Sass编译器 在Visual Studio代码中。

我的SCSS文件包含了这个网格。

$grid-cols: 12;
$grid-gutter-x: 16px;
$grid-gutter-y: 16px;

.grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat($grid-cols, minmax(0, 1fr)) !important; 
    grid-gap: $grid-gutter-x $grid-gutter-y;
}

编译后的CSS代码

.grid {
  position: relative;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(0, 1fr))[12] !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-gap: 16px 16px;
}

结果，我得到四个错误。

] expected
semi-colon expected
{ expected
{ expected

这一行导致了错误

 -ms-grid-columns: (minmax(0, 1fr))[12] !important;

我的问题是：是否可以忽略下面这行？我可以阻止我的编译器添加 -ms 前缀？还是有其他方法可以解决这个问题？

 grid-template-columns: repeat($grid-cols, minmax(0, 1fr)) !important; 

Answer 1

你可以查看Live Sass Complier 文件

你会看到这一点。

liveSassCompile.settings.autoprefix : 自动添加厂商前缀到不支持的CSS属性中(例如. transform -> -ms-transform).

用一个字符串数组指定目标浏览器（使用 浏览器列表).

设置为null则关闭。(默认为 null)

例子。

"liveSassCompile.settings.autoprefix": [
   "> 1%",
   "last 2 versions"    
]

所以如果这个是 null 默认情况下，检查你是否已经在你的设置中设置了这个，如果是的话，请相应地更改以解决你的问题。