[Vuejs]-Difference between importing CSS from HTML header VS JS file VS Vue Component

To my understanding, importing from HTML headers act as “global” stylesheets. This is especially useful if you need Reset or Normalize CSS file which doesn’t need to interact with the rest of the components at all.

Importing from JS file is a webpack feature. I usually use it to import styles to my main (or) individual page components, which then share the stylesheet for their child components.

Lastly, VueJS style tags are commonly used for “scoped” styles. This is especially useful if you need to have unique styles for many child components and doesn’t want to conflict with other component styles.

You can use the scoped styling like this.

<style scoped>
/* Your styles over here /*
</style>

You can also use CSS Pre-processors in Vue style tags like:

<style lang="scss">

<style lang="less">

Of course the pre-processor styles also can have scoped attribute.