SASS 不使用@import 编译外部 Google 字体

Question

我在 scss 中使用以下行：

@import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);

编译为 css 而没有错误...完全相同：

@import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);

但它应该被编译为：

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;

etc...

我正在使用 gulp sass to compile my scss, which is based on libsass. It says here 我的语法是正确的。为什么这不起作用？

Answer 1

这实际上是预期的行为。引用 Sass docs:

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

If the file’s extension is .css.

If the filename begins with http://.

If the filename is a url().

If the @import has any media queries.

换句话说：Sass 不会将 google 字体中的 css 直接集成到您的 css 文件中。相反，在运行时，css 导入指令将解析 link。 Google 顺便说一句，根据您的浏览器响应不同。

SASS 不使用@import 编译外部 Google 字体

SASS not compiling external Google Font with @import

css

sass

google-font-api

gulp-sass