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

【问题标题】：Customize vuetify variables - why @import must be at the end of variables.scss file?自定义 vuetify 变量 - 为什么 @import 必须在 variables.scss 文件的末尾？
【发布时间】：2021-12-31 22:28:38
【问题描述】：

我有一个 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 文件不是逐行应用吗？那么为什么我在顶部设置的样式会覆盖底部的样式呢？

我认为这是颠倒的！

【问题讨论】：

标签： css vue.js sass vuetify.js

【解决方案1】：

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

Sass 变量是命令性的，这意味着如果你使用一个变量然后改变它的值，之前的使用将保持不变。 CSS 变量是声明性的，这意味着如果您更改值，它将影响早期使用和以后的使用。

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

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

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

【讨论】：