时间戳

首页 > 解决方案 > Dart Sass 失败并出现此错误：未定义的变量。SASS

dart - Dart Sass 失败并出现此错误：未定义的变量。SASS

问题描述

我不明白这个编译错误在描述什么，因为我确实定义了 SASS 变量：

Dart Sass 失败并出现此错误：未定义的变量。╷ 64 │ 颜色：$sc-blue-light; │ ^^^^^^^^^^^^^^ ╵ _partials/navigation/_search.scss 64:12 @use style.scss 65:1 根样式表

_utilities.scss

$sc-blue-light: #5BC2E7;

_search.scss

.search {
color: $sc-blue-light;
}

_style.scss（主样式表）

@use '_partials/base/_utilities';
@use '_partials/navigation/_search';

实用程序首先被加载，这是我在其他答案中读到的，但它不适用于这里。文件路径正确。

我所有的其他样式都可以编译。就在我开始使用变量时，出现了这个错误。

有什么想法吗？

标签： dartsasscss-variablescodekit

解决方案

TL;博士

@use在文件顶部添加规则_search.scss。

带命名空间

@use '_partials/base/_utilities';

.search {
 color: utilities.$sc-blue-light;
}

或没有命名空间

@use '_partials/base/_utilities' as *;

.search {
 color: $sc-blue-light;
}

引用官方sass

使用@use 加载的成员（变量、函数和混合）仅在加载它们的样式表中可见。如果其他样式表也想访问它们，则需要编写自己的 @use 规则。

和

最简单的@use 规则写成@use ""，它在给定的URL 加载模块。以这种方式加载的任何样式都将在编译的 CSS 输出中仅包含一次，无论这些样式被加载多少次。

了解sass @use 成员
了解sass @use 命名空间

推荐阅读