Autoprefixer 生成相同的 css 代码,但带有附加注释的 sourceMappingURL。这有什么用?或者我该如何使用它?

Autoprefixer generates the same css code with additional commented sourceMappingURL. How is that useful? Or How do I use it?

我目前在我的 ExpressJS 代码中使用 Sass,并且已经能够使用以下命令生成 css 文件 -

postcss main.css -u autoprefixer -d dist/

css 文件 BEFORE 使用 autoprefixer 具有以下代码:

.container {
  display: grid;
  grid-template-columns: 2px 2px;
}

使用自动前缀的 css 文件 AFTER 具有以下代码 + 一些注释的 sourceMappingURL:

.container {
  display: grid;
  grid-template-columns: 2px 2px;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL21haW4uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBYTtFQUNiLDhCQUE4QjtBQUNoQyIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jb250YWluZXIge1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDJweCAycHg7XG59XG4iXX0= */

预期的 css 输出(根据 autoprefixer.github.io)应该是:

.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2px 2px;
  grid-template-columns: 2px 2px;
}

我的困惑分为两部分。

  1. 我是不是搞砸了 autoprefixer 命令?我是否需要以某种方式更正它以获得预期的输出?
  2. 我是否缺乏关于当前输出文件如何工作的知识,即, (a) 使用 autoprefixer 命令生成的 css 文件是否足够? (b) 我是否需要对 sourceMappingURL 做些什么才能获得所需的输出?

希望我已经足够清楚地解释了我的问题。 提前致谢!

  1. autoprefixer.github.io there is Browserlist setting below textareas saying "last 4 version". This tells Autoprefixer to add prefixes for older browsers. Most probably you don't have .browserslistrc in the root of your project or a browserslist key in your package.json that would tell autoprefixer which browsers are you targeting, so it takes defaults. browserl.ist 有助于形象化(请将 defaultslast 4 version 进行比较以查看覆盖范围的差异)。
  2. 在您的项目的根目录中创建 browserslist 并明确指出您的目标浏览器的基线。 Here 您将找到有关如何构建查询的示例。不用担心源映射 - 在这方面您无需做任何事情。

注意:在 IE11 的前缀 Grid 之前(如果您是这种情况),我鼓励您熟悉 CSS Grid in IE: CSS Grid and the New Autoprefixer