Vue 3 - import on main.js vs additionalData on vue.config.js, load a global scss file

Question

I'm trying to load a global scss using the file "vue.config.js"

vue.config.js

module.exports = {
css: {
  loaderOptions: {
    sass: {
      additionalData: `@import "@/assets/common.scss";`
    }
  }
}

}

If in my App.vue i open the style tag, with any code, like this:

App.vue

<style lang="scss">
#app{
  display: block;
}
</style>

This works, the scss is applied to all the pages, but the problem is, if i don't have the style tag on App.vue the styles will not be applied

If i use import on main.js, i don't need the style tags no App.vue

main.js

import './assets/common.scss'

Why is this happening? It is supposed to work this way? How to make the configs on vue.config.js to work, without need the style tags?

Richard Richard · Accepted Answer · 2021-03-26T18:23:51

My two cents, and hopefully someone can add more for completeness. What you are defining at the vue.config.js is how the vue-loader should behave when it finds an <style> tag, in your case you are setting the pre processor as scss. If it does not have the style tag it won't inject any styles, nor know which preprocessor to use as in <style lang="scss">, in the other case where you have the import on main it will basically gets included at the index.html which will cover every component inside but more like in a regular html import.

I would suggest to do use the style tag always as it is also part of a regular template for a vue component.

A couple of references:

Vue 3 - import on main.js vs additionalData on vue.config.js, load a global scss file

1 Answers