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>
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.