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

【问题标题】：SASS not compiling external Google Font with @importSASS 未使用 @import 编译外部 Google 字体
【发布时间】：2017-05-06 08:21:57
【问题描述】：

我在 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 我的语法是正确的。为什么这不起作用？

【问题讨论】：

【解决方案1】：

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

@import 需要一个文件名来导入。默认情况下，它会查找 Sass 文件直接导入，但有几种情况它将编译为 CSS @import 规则：

如果文件的扩展名是 .css。

如果文件名以 http:// 开头。

如果文件名是 url()。

如果@import 有任何媒体查询。

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

【讨论】：

好的！例如，我注意到 CSS 中的 Android @import 不起作用。这是否意味着我无法单独加载谷歌字体 css？
使用链接指令可能是最简单的：<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">。它对性能也更好，因为@import 可以防止样式表被同时下载。您可以在浏览器中打开 google 字体链接，然后将 css 声明复制到您自己的样式表中，但正如我所提到的，google 会根据浏览器提供稍微不同的响应，所以我不建议这样做。所以是的，我会说你坚持单独加载谷歌字体 css。
清除！谢谢。标记为已回答。