Dart Sass failed with this error: Undefined variable. SASS
Dart Sass failed with this error: Undefined variable. SASS
我不明白这个编译错误在描述什么，因为我确实定义了 SASS 变量：
Dart Sass failed with this error: Undefined variable.
╷
64 │ color: $sc-blue-light;
│ ^^^^^^^^^^^^^^
╵
_partials/navigation/_search.scss 64:12 @use
style.scss 65:1 root stylesheet
_utilities.scss
$sc-blue-light: #5BC2E7;
_search.scss
.search {
color: $sc-blue-light;
}
_style.scss（主样式表）
@use '_partials/base/_utilities';
@use '_partials/navigation/_search';
首先加载实用程序，这是我在其他答案中读到的内容，但不适用于此处。文件路径正确。
我的所有其他样式都可以编译。就在我开始使用变量的时候出现了这个错误。
有什么想法吗？
TL;DR
也在 _search.scss 中的文件顶部添加 @use 规则。
有命名空间
@use '_partials/base/_utilities';
.search {
color: utilities.$sc-blue-light;
}
或没有命名空间
@use '_partials/base/_utilities' as *;
.search {
color: $sc-blue-light;
}
引自官方sass
Members (variables, functions, and mixins) loaded with @use are only
visible in the stylesheet that loads them. Other stylesheets will need
to write their own @use rules if they also want to access them.
和
The simplest @use rule is written @use "", which loads the module
at the given URL. Any styles loaded this way will be included exactly
once in the compiled CSS output, no matter how many times those styles
are loaded.
我不明白这个编译错误在描述什么，因为我确实定义了 SASS 变量：
Dart Sass failed with this error: Undefined variable. ╷ 64 │ color: $sc-blue-light; │ ^^^^^^^^^^^^^^ ╵ _partials/navigation/_search.scss 64:12 @use style.scss 65:1 root stylesheet
_utilities.scss
$sc-blue-light: #5BC2E7;
_search.scss
.search {
color: $sc-blue-light;
}
_style.scss（主样式表）
@use '_partials/base/_utilities';
@use '_partials/navigation/_search';
首先加载实用程序，这是我在其他答案中读到的内容，但不适用于此处。文件路径正确。
我的所有其他样式都可以编译。就在我开始使用变量的时候出现了这个错误。
有什么想法吗？
TL;DR
也在 _search.scss 中的文件顶部添加 @use 规则。
有命名空间
@use '_partials/base/_utilities';
.search {
color: utilities.$sc-blue-light;
}
或没有命名空间
@use '_partials/base/_utilities' as *;
.search {
color: $sc-blue-light;
}
引自官方sass
Members (variables, functions, and mixins) loaded with @use are only visible in the stylesheet that loads them. Other stylesheets will need to write their own @use rules if they also want to access them.
和
The simplest @use rule is written @use "", which loads the module at the given URL. Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.