Node-sass 不会编译有效的 css答案

【问题标题】：Node-sass will not compile valid cssNode-sass 不会编译有效的 css
【发布时间】：2020-05-28 12:15:34
【问题描述】：

在有效的 CSS 上运行 node-sass 时出现以下错误。

SassError: Invalid CSS after "html {": expected "}", was "{"
        on line 9 of C:\Users\<user>\Documents\<project>\styles\index.sass
\>> html { {

   ------^

我不明白为什么。

这是 sass 文件

@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap');

$family-primary: "Poppins", sans-serif;

html {
  background-color: #212121;
}

【问题讨论】：

根据我的经验，最好不要将 Google 字体导入到已编译的样式表中。相反，我总是单独调用以在我的 HTML 中链接该工作表。 @import 基本上是将他们所有的样式复制到您的样式表中，这绕过了 Google 可能正在做的任何动态运行时的事情。
你是对的。这解决了这个问题。谢谢！
很高兴有帮助！我将为偶然发现此问题的其他人创建一个完整的答案...

标签： css sass node-sass

【解决方案1】：

我猜这个错误源于使用@import 来包含 Google 字体样式表。这里可能发生了几件事。

当您将@import 与 SCSS 一起使用时，您会得到一个样式表复制到您的主要样式中。由于这发生在编译完成之前，导入的 CSS 中的任何错误都会影响编译器解析有效 CSS 的能力。换句话说，您的 CSS 是完全有效的，但您不知道导入的 CSS 中的哪些内容可能导致 final 中断。
具体来说，对于 Google 字体，生成的 CSS 实际上是根据浏览器的功能动态生成的。目标是仅提供给定浏览器所需的字体类型和文件负载。由于您将 Google 的 CSS 包含到已编译的 CSS 中，因此 Google 不知道向 Node.js（不是浏览器）提供什么，并且可能会中断。
即使 Google 确实猜到了如何向您发送可以在您的 SASS 解析器中顺利编译的 CSS，它也不会包含对每个浏览器的所有字体支持，进而影响您的用户体验。

解决方案：

包含@import 的CSS 文件在运行时发出一个新的HTTP 请求，这样您就可以走这条路。为此，您需要从 SASS 解析器中排除导入。 SASS 没有很好的方法来做到这一点，但您可以尝试将整行放在引号中，希望能导致 SASS 忽略它。

"@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap');"

不幸的是，像这样导入的 CSS 是运行时渲染阻塞。因此，如果 Google CSS 由于某种原因（例如在中国被阻止）无法加载，它将导致您的整个渲染过程停止，直到超时。 周围都不是很好。

在这种情况下，最好的办法是在您的 HTML 文档中添加另一个 CSS 调用。是的，您收到了另一个请求，但这不会阻止渲染（这就是为什么您会收到无样式文本的闪烁）并显着简化您的设置。

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap">
  <link rel="stylesheet" href="mySiteStyles.css">
</head>

【讨论】：

不幸的是，这不是解决办法。这是使用 .sass 扩展名时的缩进问题。切换到 .scss 解决了这个问题。