使用 node-sass 编译 SCSS 时出现未定义变量错误

Posted 2023-02-21

【中文标题】使用 node-sass 编译 SCSS 时出现未定义变量错误

【英文标题】：Getting Undefined variable error when compiling SCSS using node-sass

【发布时间】：2018-05-10 10:53:48

【问题描述】：

package.json

"scripts": 
  "compile:sass": "node-sass sass/main.scss css/style.css -w"

ma​​in.scss

@import "abstracts/variables";
@import "base/typography";  

_variables.scss

$color-light-grey: #777;
$color-white: #fff;   

_typography.scss

body 
  color: $color-light-grey;

.heading-primary 
  color: $color-white;

现在我的问题是，当我尝试使用 npm run compile:sass 进行编译时，它会引发以下错误：

"message": "未定义变量：\"$color-light-grey\"。"

【问题讨论】：

variable 与 variables?

【参考方案1】：

转换所有以“_”开头的文件名 示例：typography.scss >> 到 >> _typography.scss

【讨论】：

请确保您的答案比该问题中已有的答案有所改进。

【参考方案2】：

您上面的代码中似乎有两个错误：

您导入了"abstracts/variables"，但至少在文本中，文件名似乎是_variables.scss（缺少一个“s”） 您应该先导入"abstracts/variables"。

这样：

@import "abstracts/variables";
@import "base/typography";

【讨论】：

它有效，但我不知道。有什么理由会有所作为吗？是否需要按优先级排序文件？