My goal is to import a variables.scss file globally in my Vue project. I have set up my vue.config.js file as follows:
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`
},
}
}
}
The contents of variables.scss are:
$dark-bg: #1C2537;
In the Vue file where I attempt to use these variables, the code snippet looks like this:
<script setup>
// Component logic
</script>
<template>
<!-- Template -->
</template>
<style lang="scss">
@import '@/styles/variables.scss'; // When I add this line, everything works
.left-menu {
background-color: $dark-bg;
}
</style>
When I directly import variables.scss in the Vue file, it works fine, but global import does not. Any insights into what might be causing this issue?
Here are the versions I am using: "sass": "^1.69.5", "sass-loader": "7.3.1", "vue": "^3.2.26"
I expect the variables from variables.scss to work globally across all Vue files.