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
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>
If you want your external CSS file to be globally accessible you can include it in your
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:
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.
Hi, I'm Renat 👋
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.
Want to share this with your friends?
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.