I would like to use predefined variables in my Vue 3 components.
<template>
<div >
<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>
Unfortunately, I get an error "SassError: Undefined variable.". What do I have to import to use the global variables of Vuetify?
CodePudding user response:
the use of those colors is not that straight forward.
It is documented here https://vuetifyjs.com/en/features/sass-variables/#webpack-install
note Requires sass-loader@^7.0.0
and changes to webpack config
You can also skip that, if in your component file you import the color variables (your amount of ../
may vary)
@import '../../node_modules/vuetify/src/styles/settings/_colors.scss';
next thing to keep in mind is the structure of the object
here is an excerpt
$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
);
so the colors are not mapped to a string, but to an object (see map-deep-merge
) so you cannot use $red
to give you the color value.
Instead, you would use map-deep-get
function to get the base red
.class{
background: map-deep-get($colors, "red", "base");
/* OR */
background: map-get($red, "base");
}
so it would look like this
<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>