I am attempting to load a global SCSS file using the "vue.config.js" file.
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/common.scss";`
}
}
}
}
If I include the style tag in my App.vue with any code like the following:
App.vue
<style lang="scss">
#app{
display: block;
}
</style>
This successfully applies the SCSS styles to all pages. However, the issue arises when I omit the style tag in App.vue, as the styles are not applied.
By using import in main.js, I can avoid the need for style tags in App.vue.
main.js
import './assets/common.scss'
Why does this happen? Is this the expected behavior? How can I configure vue.config.js to apply the styles without requiring the style tags?