Vue 3 dan Vuetify 3 mengakses pembolehubah SCSS/SASS dalam komponen

Question

Saya mahu menggunakan pembolehubah yang dipratentukan dalam komponen Vue 3 saya.

<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>

Malangnya, saya mendapat ralat "SassError: Undefined variable.". Apakah yang perlu saya import untuk menggunakan pembolehubah global Vuetify?

Answer 1

Penggunaan warna ini tidak itulangsung.

Didokumentasikan di sinihttps://vuetifyjs.com/en/functions/sass-variables/#webpack-install Perhatikan 需要 sass-loader@^7.0.0 dan tukar konfigurasi webpack

Anda juga boleh melangkau ini jika anda mengimport pembolehubah warna dalam fail komponen (../ nombor mungkin berbeza-beza)

@import '../../node_modules/vuetify/src/styles/settings/_colors.scss';

Perkara seterusnya yang perlu diingat ialah struktur objek

Berikut adalah petikan

$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
);

Jadi warna tidak dipetakan kepada rentetan, tetapi pada objek (lihat map-deep-merge），因此您不能使用$red untuk memberi anda nilai warna.

Sebaliknya anda boleh menggunakan fungsi map-deep-get untuk mendapatkan warna merah asas

.class{
  background: map-deep-get($colors, "red", "base");
  /* OR */
  background:  map-get($red, "base");
}

Jadi ia kelihatan seperti ini

<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>