css - SASS 不使用@import 编译外部谷歌字体

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编译我的 scss，它基于 libsass。它说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 import 指令将解析链接。顺便说一句，Google 会根据您的浏览器做出不同的响应。