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

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 .

我不断收到错误：

错误：未定义的变量。╷ 10 │ 字体大小：($baseFontSize / 16) * 100%；│ ^^^^^^^^^^^^^ ╵<br /> css/_typography.scss 10:17 @use
style.scss 6:1 根样式表

我正在使用 SASS 版本 1.43.4

score 1 · Accepted Answer

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

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

注意：您还可以考虑使用带有at-rules 的索引文件@use，它允许您使用单个@use调用加载部分目录

1 回答 1