CODEWITHSUNDEEP
javascripthtmlcssvue.js
Leeren
Leeren

Reputation: 2081

Difference between importing CSS from HTML header VS JS file VS Vue Component

I am experimenting around with Vue (having webpack installed) and am wondering what the differences are in methods of importing CSS. It seems as though there are three ways in which you can import CSS:

  1. Importing style sheets in HTML headers: <link type="text/css" rel="stylesheet" ... >
  2. Importing css files from JS files (e.g. main.js): import '@/assets/css/app.cs' / require
  3. Importing css files within Vue style tags: <style>@import '...'</style>

In which situations would we want to use one method of importing over the other? What are the best procedures for this?

Upvotes: 0

Views: 620

Answers (1)

Kaung Myat Lwin
Kaung Myat Lwin

Reputation: 1109

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.

Upvotes: 3

Related Questions