我想在我的 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>
不幸的是,我收到錯誤「SassError:未定義的變數。」。 我必須導入什麼才能使用 Vuetify 的全域變數?
這些顏色的使用並不是那麼直接的。
此處記錄了https://vuetifyjs.com/en/功能/sass-variables/#webpack-install 注意
需要 sass-loader@^7.0.0
並更改 webpack 設定如果在元件檔案中匯入顏色變量,您也可以跳過這一點(
../
的數量可能會有所不同)接下來要記住的是物件的結構
這裡是摘錄
因此顏色不會映射到字串,而是映射到物件(請參閱
map-deep-merge
),因此您不能使用$red
來為您提供顏色值。相反,您可以使用
map-deep-get
函數來取得基礎紅色所以它看起來像這樣