Node-sass无法编译有效的CSS

问题描述 投票：0回答：1

在有效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;
}
css sass node-sass
1个回答
0
投票
我想该错误源于使用@import包括Google字体样式表。这里可能发生了几件事。

  1. 当将@import与SCSS一起使用时，您会得到一个样式表

    复制到您的主要样式。由于这种情况在编译完成之前发生，因此导入的CSS中的任何错误都会影响编译器解析有效CSS的能力。换句话说，您的CSS是完全有效的，但是您不知道所导入的CSS中可能会导致最终结果损坏的内容。

  2. 具体来说，对于Google字体，生成的CSS实际上是根据浏览器的功能动态生成的。目标是仅提供给定浏览器所需的字体类型和文件有效负载。由于您将Google的CSS包含在已编译的CSS中，因此Google不知道该为Node.js（不是浏览器）提供什么服务，并且可能会中断。

  3. 即使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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.