Ho to load css file only for a specific Vue Component?

user_17368086 0
Viewed 348

I have created a headless application with vue and now I need to load a css file exclusively for a specific component.
In the code below I have inserted the css file, but unfortunately it is displayed globally throughout the application.

<script>
export default {
name: "FriendComponent",
...
}
</script>

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

To apply any CSS file or code to a specific component, you need to add scoped in your style tag of the component.

Have a look at this:

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

This will apply CSS to this specific component.

user_100577040
Related