Je souhaite utiliser des variables prédéfinies dans mon composant Vue 3.
<template>
<div class="rounded img-container">
<span v-if="!props.ready">Du musst noch ein Bild aufnehmen!</span>
</div>
</template>
<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps({
ready: { type: Boolean, required: true }
})
</script>
<style lang="scss" scoped>
.img-container {
aspect-ratio: 3 / 2;
margin-left: auto;
margin-right: auto;
background: $red; <- Error
}
.text-small {
font-size: 2em;
}
</style>
Malheureusement, j'obtiens l'erreur "SassError : Variable non définie.". Que dois-je importer pour utiliser les variables globales de Vuetify ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
L'utilisation de ces couleurs n'est pas sisimple.
Documenté icihttps://vuetifyjs.com/en/functions/sass-variables/#webpack-install Notez
需要 sass-loader@^7.0.0et modifiez la configuration du webpackVous pouvez également ignorer cette opération si vous importez des variables de couleur dans le fichier du composant (le nombre de
../peut varier)La prochaine chose à retenir est la structure de l'objet
Voici un extrait
$red: () !default; $red: map-deep-merge( ( 'base': #F44336, 'lighten-5': #FFEBEE, 'lighten-4': #FFCDD2, 'lighten-3': #EF9A9A, 'lighten-2': #E57373, 'lighten-1': #EF5350, 'darken-1': #E53935, 'darken-2': #D32F2F, 'darken-3': #C62828, 'darken-4': #B71C1C, 'accent-1': #FF8A80, 'accent-2': #FF5252, 'accent-3': #FF1744, 'accent-4': #D50000 ), $red ); /* other colors... */ $colors: () !default; $colors: map-deep-merge( ( 'red': $red, 'pink': $pink, 'purple': $purple, 'deep-purple': $deep-purple, 'indigo': $indigo, 'blue': $blue, 'light-blue': $light-blue, 'cyan': $cyan, 'teal': $teal, 'green': $green, 'light-green': $light-green, 'lime': $lime, 'yellow': $yellow, 'amber': $amber, 'orange': $orange, 'deep-orange': $deep-orange, 'brown': $brown, 'blue-grey': $blue-grey, 'grey': $grey, 'shades': $shades ), $colors );Ainsi, les couleurs ne correspondent pas à des chaînes, mais à des objets (voir
map-deep-merge），因此您不能使用$redpour vous donner les valeurs de couleur.Au lieu de cela, vous pouvez utiliser la fonction
map-deep-getpour obtenir la couleur rouge de base.class{ background: map-deep-get($colors, "red", "base"); /* OR */ background: map-get($red, "base"); }Donc ça ressemble à ça
<style lang="scss" scoped> @import '../../node_modules/vuetify/src/styles/settings/_colors.scss'; .img-container { aspect-ratio: 3 / 2; margin-left: auto; margin-right: auto; background: map-deep-get($colors, "red", "base"); /* OR */ background: map-get($red, "base"); } .text-small { font-size: 2em; } </style>