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;
}
我的困惑分为两部分。
- 我是不是搞砸了 autoprefixer 命令?我是否需要以某种方式更正它以获得预期的输出?
- 我是否缺乏关于当前输出文件如何工作的知识,即,
(a) 使用 autoprefixer 命令生成的 css 文件是否足够?
(b) 我是否需要对 sourceMappingURL 做些什么才能获得所需的输出?
希望我已经足够清楚地解释了我的问题。
提前致谢!
- 在 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
我目前在我的 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 做些什么才能获得所需的输出?
希望我已经足够清楚地解释了我的问题。 提前致谢!
- 在 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 abrowserslist
key in yourpackage.json
that would tell autoprefixer which browsers are you targeting, so it takesdefaults
. browserl.ist 有助于形象化(请将defaults
与last 4 version
进行比较以查看覆盖范围的差异)。 - 在您的项目的根目录中创建
browserslist
并明确指出您的目标浏览器的基线。 Here 您将找到有关如何构建查询的示例。不用担心源映射 - 在这方面您无需做任何事情。
注意:在 IE11 的前缀 Grid 之前(如果您是这种情况),我鼓励您熟悉 CSS Grid in IE: CSS Grid and the New Autoprefixer