css - SASS 不会编译 @import Google 字体 CDN

Question

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

我阅读了有关此问题的几篇文章，建议执行此命令：

gem install compass

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

Answer 1

Sass 导入代码应如下所示：

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

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

这是一个关于如何在 Sass 中使用 Google 字体的小教程。

Answer 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);

Answer 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">