Include external CSS file in Vue.js component
📋 Table Of Content
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 )
- Globally
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 <style></style> tags.
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 main.js file.
Example:
We have a style.css file in the assets folder. To load it in our Vue.js app we have to import it to main.js :
import './assets/css/style.css'
You can also include cdn in the main.js :
import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css';
In main.js file:
Now all the CSS code in the style.css file will be applied to your entire Vue.js app.
Related Topics:
How To Add Common Header And Footer In Vuejs.
How To Add Dynamic HTML Attributes In VueJS ?
