我有一個由 vue cli 制作的專案，我想更改 vuetify 的默認變數，例如將 $red 顏色更改為另一種顏色，按照 vuetify 檔案，為此我可以variables.scss在src/sass目錄中命名一個檔案。在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 檔案不是逐行應用的嗎？那么為什么我在頂部設定的樣式會覆寫底部的樣式呢？
我認為這是顛倒的！
uj5u.com熱心網友回復：
一如既往......檔案可以提供幫助：
Sass 變數是命令式的，這意味著如果你使用一個變數然后改變它的值，之前的使用將保持不變。CSS 變數是宣告性的，這意味著如果您更改該值，它將影響先前的使用和以后的使用。
因此，如果您使用所有變數宣告和CSS匯入 Vuetify scss ，則該 CSS 不會受到匯入后所做的覆寫變數宣告的影響...
此外，Vuetify 宣告了它的所有變數，!default 這意味著只有在之前沒有宣告的情況下，Vuetify 提供的值才會被應用......
將兩者結合起來，很明顯要覆寫任何內置的 Vuetify 變數，您必須首先宣告它，然后再匯入 Vuetify 樣式
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/401281.html
標籤：css Vue.js 蠢货 Vuetify.js