自定义 vuetify 变量 - 为什么 @import 必须在 variables.scss 文件的末尾？

Question

我有一个由 vue cli 制作的项目，我想更改 vuetify 的默认变量，例如 $red 颜色为另一种颜色，按照 vuetify 文档，为此我可以在 src/sass 目录中有一个名为 variables.scss 的文件。在 variables.scss 文件中，必须导入 vuetify 样式文件。但是如果我先导入它，它就不起作用：

first import:
@import '~vuetify/src/styles/styles'

then custom vars:
.... start custom variables

for example:
$red: (
'base': #fd2ff0
)

.... end custom variables

但是当我在文件末尾设置@import , 效果很好:

first custom vars:
.... start custom variables

for example:
$red: (
'base': #fd2ff0
)

.... end custom variables

then import:
@import '~vuetify/src/styles/styles'

为什么会这样？

scss文件不是逐行应用的吗？那么为什么我在顶部设置的样式会覆盖底部的样式？

我觉得这是颠倒的！

Answer 1

一如既往...docs 可以帮助：

Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses.

因此，如果您使用所有变量声明和 CSS 导入 Vuetify scss，那么 CSS 将不会受到完成的覆盖变量声明的影响导入后...

此外，Vuetify 使用 !default which means 声明其所有变量，如果之前未声明，将应用 Vuetify 提供的值仅...

结合两者，很明显要覆盖任何内置 Vuetify 变量，您必须先声明它，然后再导入 Vuetify 样式

自定义 vuetify 变量 - 为什么 @import 必须在 variables.scss 文件的末尾？

Customize vuetify variables - why @import must be at the end of variables.scss file?

css

sass

vue.js

vuetify.js