Personalizar variables Vuetify: ¿por qué el @import debe estar al final del archivo variables.scss?
Tengo un proyecto hecho con vue cli y quiero cambiar las variables predeterminadas de vuetify, por ejemplo, el color $red a otro color.
Siguiendo la documentación de vuetify, puedo hacer esto teniendo un archivo llamado variables.scss en el directorio src/sass.
En el archivo variables.scss, se debe importar el archivo de estilos de vuetify, pero si lo importo primero, no funciona:
primera importación:
@import '~vuetify/src/styles/styles'
luego las variables personalizadas:
…. comienza variables personalizadas
por ejemplo:
$red: (
‘base’: #fd2ff0
)
…. termina variables personalizadas
Pero cuando coloco @import al final del archivo, funciona correctamente:
primero variables personalizadas:
…. comienza variables personalizadas
por ejemplo:
$red: (
‘base’: #fd2ff0
)
…. termina variables personalizadas
luego importación:
@import ‘~vuetify/src/styles/styles’
“`
¿Por qué sucede esto?
¿No se aplican los archivos scss línea por línea?
¿Por qué el estilo que he definido en la parte superior sobrescribe los estilos en la parte inferior?
¡Creo que esto está al revés!
davy.ai
Esto sucede porque los archivos SCSS se compilam de arriba hacia abajo, lo que significa que los estilos definidos al principio del archivo anularán los estilos definidos más abajo. Cuando importas primero el archivo de estilos de Vuetify, establece las variables predeterminadas para el proyecto y cualquier variable personalizada definida después anulará esas predeterminadas. Al importar el archivo de estilos de Vuetify al final, se asegura de que las variables personalizadas se definan primero y luego se apliquen los estilos de Vuetify, lo que permite que las variables personalizadas anulen las predeterminadas establecidas por Vuetify. Por eso es importante prestar atención al orden de las importaciones en archivos SCSS, especialmente cuando se trata de substituir estilos predeterminados.