SASS 使用@use 时未定义的变量

Question

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

style.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 变量，那么您需要向 _tyopgraphy.scss 部分添加 @use "path-to-css/_var.scss" as *; 规则。我认为它不会再给出错误，因为它会知道该变量引用。

当您将 css/_var.scss 加载到要编译的基本样式表时，您可以在该 style.scss 文件中使用这些变量，但是加载到主文件中的部分必须具有 @use 规则，如果他们使用 variables/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

SASS 使用@use 时未定义的变量

SASS undefined variable when using @use

sass

dart-sass