node-sass 无效的 CSS

Posted 2023-02-21

【中文标题】node-sass 无效的 CSS

【英文标题】：node-sass invalid CSS

【发布时间】：2021-06-19 05:49:03

【问题描述】：

node-sass 甚至支持 @use 吗？由于我收到此错误：

SassError: Invalid CSS after "...t-family: fonts": 预期的表达式（例如 1px，粗体），是 ".$roboto;"

这是 Nav.scss 的代码：

.nav 
  width: 100%;
  font-family: fonts.$roboto;

  &__item 
    margin-bottom: 10px;
    font-size: variables.$a;

    &_active 
      color: rgb(37, 133, 34);
    
  

  &__item:last-child 
    margin-bottom: 0px;
  

这是fonts.scss的代码：

$roboto: 'Roboto';

【问题讨论】：

语法完全错误。 sass-lang.com/documentation/variables

在哪里？完全正确

@use 仅受 dart-sass 支持 - 如果您使用的是 lib-sass 或 ruby-sass，这可能就是您收到该错误的原因。我相信node-sass 使用lib。这是一个 github 问题：github.com/sass/node-sass/issues/2886

@cloned 它位于内置模块下。 sass-lang.com/documentation/variables#built-in-variables

@disinfor：如果你或 Programmer_007 设法证实了你的假设，你的评论应该是一个很好的答案。

【参考方案1】：

node-sass 的语法不正确。

您已在 fonts.scss 中正确定义了字体变量，但如果您还没有将字体文件导入 Nav.scss 文件，则需要：

@import "PATH/fonts.scss";

然后你只需要像这样引用变量：

font-family: $roboto;