使用@use时SASS undefined variable

Question

我正在使用一些复制的 SASS 代码来启动一个项目。它是用 @import 为 Ruby SASS 编写的，我已将其更改为 @use 为 Dart SASS。

样式.scss

// base
@use 'css/var' as *;
@use 'css/base' as *;
@use 'css/typography' as *;

// layouts
@use 'css/container' as *;
@use 'css/grid' as *;

css/_var.scss

$baseFontSize:16 !default;
$baseLineHeight:1.5 !default; 
$leading:$baseLineHeight * 1rem !default;

在 style.scss 所在的目录中，我运行了 sass --watch .

我不断收到错误:

Error: Undefined variable. ╷ 10 │ font-size: ($baseFontSize /16) * 100%; │ ^^^^^^^^^^^^^ ╵
css/_typography.scss 10:17 @use
style.scss 6:1 root stylesheet

我正在使用 SASS 版本 1.43.4

Answer 1

如果 _typography.scss 部分使用来自 css/_var.scss 的 Sass 变量，那么你需要添加一个 @use "path-to-css/_var.scss"as *; at-rule 到 _tyopgraphy.scss 部分。我认为它不会再给出错误，因为它会知道该变量引用。

当您将 css/_var.scss 加载到要编译的基本样式表时，您可以在该 style.scss 文件中使用这些变量，但是加载到的部分主文件必须有 @use 规则，如果它们使用变量/mixins/etc 并且还没有加载的话。

Note: You can also look into using index files with @use at-rules which allows you to load a directory of partials using a single @use call