How is it different for vue to reference css in main.js than in App.vue.

Global public stylesheets, such as common.scss
can be referenced in main.js, code such as:

import "./assets/css/common.scss"

can also be referenced in App.js, such as:

<style lang="scss">
@import "./assets/css/common.scss";
</style>

what are the differences (details) between them?

Apr.01,2022

main.js first app.vue then
it's easy to understand how references in main.js are written

.
import Vue from 'vue'
import App from './App'
import './assets/css/common.scss'
...
new Vue({
  el: '-sharpapp',
  router,
  store,
  components: { App },
  template: '<App/>'
});

then both common and app levels are import into main

while the app reference is dependent, the style common.scss
is referenced in app, just as the system architecture is 1 main reference and APP reference is similar to 1x2 = 1 + (1x1); the 2 on the left side of the equation is introduced together in main, so the output is 2
, of course, both of them can achieve the effect of global reference. I wonder if this interpretation can understand

.
Menu