Tutorial on how to import local or external CSS files in Vue.js application.
Here we will see how to include the CSS file in Vue:
- Only in one component ( in a separate file )
Import CSS files into a single file component
In Vue.js app, we have to work with many components. And if we want to include a local or external CSS file in only one component then we have to import it in the
For example, we want to include the
style.css file from the assets folder to a single component. To import it we have to do is:
<style> @import '@/assets/css/style.css'; </style>
or if you want to include a cdn (like bootstrap) only in one component then:
<style> @import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'; </style>
Now the styles from
style.cssfile will only be applied to the single component only.
Include CSS globally in Vue
In vuejs , to include a CSS file that is globally accessible to all the components in your vue project, we have to import it in the
We have a style.css file in the assets folder. To load it in our Vue.js app we have to import it to
You can also include cdn in the main.js :
In main.js file:
Now all the CSS code in the style.css file will be applied to your entire Vue.js app.