Currently, I am working with sass and vue version-3. Within one of my components, the following code is present:
HelloWorld.vue :
<template>
<div class="greetings">
<h1>{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
</h3>
</div>
</template>
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
</script>
<style scoped lang="scss">
@use "sass:list";
@use "@/assets/sass-folder/variables";
@use "@/assets/sass-folder/main";
h1 {
color: list.nth(variables.$theme-lighten-1, 2);
}
h3 {
color: var(--blue);
}
</style>In this component, I included a main.scss file using the @use sass command. However, the css variable --blue is not being recognized within this component. Here is the content of the main.scss file:
main.scss :
:root {
--blue: #1e90ff;
--white: #ffffff;
}
//h3 {
// color: red;
//}
If I uncomment the h3 styles in that file, the color of the h3 tag in my component changes to red, indicating that the file is imported correctly. Can someone please assist me in identifying what part of my code is causing the --blue variable to not be recognized in the HelloWorld.vue component?