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

Question

我目前在我的 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;
}

我的困惑分为两部分。

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

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

Answer 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 有助于形象化（请将 defaults 与 last 4 version 进行比较以查看覆盖范围的差异）。
在您的项目的根目录中创建 browserslist 并明确指出您的目标浏览器的基线。 Here 您将找到有关如何构建查询的示例。不用担心源映射 - 在这方面您无需做任何事情。

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

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

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

sass

postcss

autoprefixer