覆盖使用另一个变量的 vuetify sass 变量

Question

我的 variables.scss 文件已设置并按照文档工作。但是，如果我尝试覆盖依赖于另一个变量的变量，则会引发错误。

我想改变

$container-padding-x: $grid-gutter / 2 !default;

到

$container-padding-x: $grid-gutter !default;

但是，如果不指定 $grid-gutter 则我无法做到这一点，而 $grid-gutter 又依赖于 $spacer 所以我最终不得不定义所有 3 个。这是预期的行为吗？

这是我得到的构建错误...

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
6 │ $container-padding-x: $grid-gutter;
  │                       ^^^^^^^^^^^^
  ╵
  src/sass/variables.scss 6:23  @import
  src/sass/global.scss 1:9      root stylesheet

Answer 1

删除 !default。

!default 用于防止 vuetify 覆盖您的修改，这意味着当您更改一个 sass 变量时，它将在 vuetify 之前设置，当调用 vuetify 变量时，!default 将说明该变量是否已设置，忽略它。

$container-padding-x: $grid-gutter