Penggunaan warna ini tidakitulangsung.

Didokumentasikan di sinihttps://vuetifyjs.com/en/functions/sass-variables/#webpack-installPerhatikan需要 sass-loader@^7.0.0dan 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 (lihatmap-deep-merge），因此您不能使用$reduntuk memberi anda nilai warna.

Sebaliknya anda boleh menggunakan fungsimap-deep-getuntuk mendapatkan warna merah asas

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

Jadi ia kelihatan seperti ini