node-sass 无效的 CSS答案

【问题标题】：node-sass invalid CSSnode-sass 无效的 CSS
【发布时间】：2021-07-06 08:44: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 设法证实了你的假设，你的评论应该是一个很好的答案。

标签： css sass node-sass

【解决方案1】：

node-sass 的语法不正确。

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

@import "PATH/fonts.scss";

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

font-family: $roboto;

【讨论】：