节点sass将不会编译有效的css_Css_Sass_Node Sass

节点sass将不会编译有效的css

css sass

节点sass将不会编译有效的css,css,sass,node-sass,Css,Sass,Node Sass,在有效CSS上运行节点sass时，我遇到以下错误 SassError: Invalid CSS after "html {": expected "}", was "{" on line 9 of C:\Users\<user>\Documents\<project>\styles\index.sass \>> html { { ------^ 我猜这个错误源于使用@import包含Google字体样式表。这里可能发生了一些事情将@

在有效CSS上运行节点sass时，我遇到以下错误

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

   ------^

我猜这个错误源于使用

@import

包含Google字体样式表。这里可能发生了一些事情

将

@import

与SCSS一起使用时，会将一个样式表复制到主样式中。由于这是在编译完成之前发生的，所以导入的CSS中的任何错误都会影响编译器解析有效CSS的能力。换句话说，您的CSS是完全有效的，但您不知道导入的CSS中有哪些内容可能导致最终结果失败

具体来说，在Google字体的情况下，生成的CSS实际上是根据浏览器的功能动态生成的。目标是只为给定浏览器提供所需的字体类型和文件有效负载。由于您正在将Google的CSS包含到已编译的CSS中，Google不知道向Node.js（不是浏览器）提供什么，可能会崩溃

即使谷歌确实猜到了如何向你发送CSS，它将在你的SASS解析器中愉快地编译，它也不会包含所有浏览器的字体支持，这反过来会妨碍你的用户体验

解决：包含

@import

的CSS文件会在运行时发出一个新的HTTP请求，以便您可以执行此路径。为此，需要从SASS解析器中排除导入。SASS并没有一个很好的方法来做到这一点，但是你可以尝试把整行都用引号引起来，希望能让SASS忽略它

@import url（'code>“）https://fonts.googleapis.com/css?family=Poppins:400，600700&display=swap'）；“

不幸的是，像这样导入的CSS是运行时渲染阻塞。因此，如果谷歌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>

根据我的经验，最好不要将谷歌字体导入已编译的样式表中。相反，我总是单独调用以在HTML中链接该工作表@导入基本上是将它们的所有样式复制到您的样式表中，这绕过了Google可能正在进行的任何动态运行时操作。您是对的。这就解决了问题。非常感谢。很高兴这有帮助！我将为任何其他偶然发现这一点的人创建一个完整的答案…不幸的是，这不是解决办法。当使用.sass扩展名时，这是一个缩进问题。切换到.scss解决了这个问题。

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