时间戳

首页 > 解决方案 > 覆盖使用另一个变量的 vuetify sass 变量

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

问题描述

我已经设置了 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

标签： vuetify.js

解决方案

删除 !default。

!default 用于防止 vuetify 覆盖你的修改，这意味着当你更改一个 sass 变量时，它会在 vuetify 之前设置，当调用 vuetify 变量时，!default 会说如果这个变量已经设置，忽略它。

$container-padding-x: $grid-gutter

推荐阅读