SASS 不会编译 @import Google 字体 CDN答案

【问题标题】：SASS Won't Compile @import Google Font CDNSASS 不会编译 @import Google 字体 CDN
【发布时间】：2014-12-08 14:35:16
【问题描述】：

我最近在其他开发人员的 SASS 项目中遇到了这个问题，其中 Google CDN 导入无法编译 - 查看屏幕截图，注释掉时保存良好。

我看了几篇关于这个问题的文章，有人建议做这个命令：

gem install compass

我不使用指南针，我使用 Coda 的 SASS 插件。猜猜之前的开发者是用 Compass 编译的？认为这可能有助于解决编译问题。

【问题讨论】：

标签： css compiler-errors sass compass

【解决方案1】：

Sass 导入代码应如下所示：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700);

您正在从 URL 导入，但您的代码编写时就像您正在导入本地文件一样 - 这就是错误消息显示找不到它的原因。

这里有一个关于how to use Google fonts with Sass的小教程。

【讨论】：

谢谢！奇怪...在其他开发环境中工作。你的建议奏效了。
我的问题是括号内有单引号。删除它，因为您的答案解决了我的问题。

【解决方案2】：

我们可以在 .scss 中导入单独的 Sass 文件

例如我们有两个文件，一个在项目的本地目录，另一个在 CDN 服务器/在线服务器（例如 google 字体）。

本地文件：css/nameofstylsheet.scss

在线服务器：http://fonts.googleapis.com/cssfamily=Open+Sans:300italic,400italic,700italic,400,300,700);

我们将它们用作：

@import "css/nameofstylsheet.scss";

@import url(http://fonts.googleapis.com/cssfamily=Open+Sans:300italic,700italic,400,300,700);

【讨论】：

您在css 和family 之间缺少一个问号。

【解决方案3】：

导入代码应如下所示：

  @import url('https://fonts.googleapis.com/css2?family=Spartan&display=swap');

或者你可以直接在你的html中使用链接标签链接字体文件：

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">

【讨论】：