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

I have a project made by vue cli and I want to change vuetify's default variables, e.g the $red color to another color, Following vuetify docs, to do this I can have a file named variables.scss in src/sass directory. In the variables.scss file, vuetify style file must be imported. but if I import it first, it does not work:

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

then custom vars:
.... start custom variables

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

.... end custom variables

But when I set @import at the end of the file , it works well:

first custom vars:
.... start custom variables

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

.... end custom variables

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

Why this happens?

doesn't scss files apply line by line? So why the style that I have set at the top, overrides the styles at the bottom?

I think this is upside down!

CodePudding user response：

As always...docs can help:

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.

So if you import Vuetify scss with all variable declarations and CSS using them, that CSS will not be affected by the overriding variable declaration done after the import...

Also, Vuetify declares all it's variables with !default which means that values provided by Vuetify will be applied only if not declared before...

Combine the two and it is clear that to override any build-in Vuetify variable you must declare it 1st and import Vuetify styles later