I trying do import globally an variables.scss file
my vue.config.js like the following:
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`
},
}
}
}
variables.scss
$dark-bg: #1C2537;
and vue file where i try use it
<script setup>
// Component logic
</script>
<template>
<!-- Template -->
</template>
<style lang="scss">
@import "@/styles/variables.scss"; // if i add this all works
.left-menu {
background-color: $dark-bg;
}
</style>
when i directly import variables.scss in vue file all work good but global import not works
if any idea what problem is?
i use: "sass": "^1.69.5", "sass-loader": "7.3.1", "vue": "^3.2.26",
i expect my variables from variables.scss works globally in all vue files
I've quite similar configuration but the only thing that differs from yours is the scss
property which is `sass :
Syntax for sass-loader v9 and above :
loaderOptions: {
sass: {
additionalData: `
@use "sass:math";
@import "@/css/_colors.scss";
@import "@/css/_animations.scss";
@import "@/css/_mixins.scss";
`
}
}
In my .vue
file I can do then the following with no errors :
<style lang="scss">
.message {
color: $error-color;
}
</style>
Since, according to documentation, sass
options also applies to scss
options, maybe you could give it a try ?
My declared version of vue / sass and sass-loader in package.json
:
"vue": "^3.2.47",
"sass": "^1.51.0",
"sass-loader": "^12.6.0"
Important note in documentation : this option is named as prependData
in sass-loader v8
EDIT After digging more since we have some differences in sass-loader
versions, I found that you should use the data
option, as suggested by Alex in the comments
See changelog v8 where they say that
the data option was renamed to the prependData option
And then see changelog v9 where they say that
the prependData option was removed in favor the additionalData option, see docs
So here is correct syntax for v8 sass-loader (working with scss or sass loaderOptions) :
loaderOptions: {
scss: {
prependData: `@/styles/variables.scss";`
}
}
For v7 and below :
loaderOptions: {
scss: {
data: `@/styles/variables.scss";`
}
}
And for v9 and above
loaderOptions: {
scss: {
additionalData: `@/styles/variables.scss";`
}
}