Load external CSS file into Vue.js component

In this tutorial, you’ll learn how to import external/local CSS files in Vue.js components.

Include CSS file in one component

If you want to include the external CSS file in only one component you can import it in the <style></style> tag.

For example, we want to include Bootstrap 4 CSS file in a single component. It will only work for that component. Here’s how you can do it.

<style>
@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css';
</style>

Include globally

If you want your external CSS file to be globally accessible you can include it in your main.js file.

import '@/scss/main.scss';

Main.scss CSS styles will apply to your entire Vue.js app. You can also replace it with an external CSS file by changing the path, like so:

import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css';

Include in index.html

You can also include external CSS files in your index.html file. This will make them available globally, but you won’t be able to include .SCSS files and have full control over SCSS variables.

I suggest including external CSS files in main.js file instead.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-external-css

PS: Make sure you check other Vue.js tutorials, e.g. commenting out code in Vue.js, how to stop mouse event propagation in Vue.js and remove duplicate values from Vue.js array using ES6.

Incoming search terms: