External CSS isolation.

[hylawa]

How to add a scoped attribute to the imported external css in a vue web page introduced by using tags?

[AnaelBonnafous]

You can add scoped attribute to css files imported in vue single file components, it works as well with your css files as with packages stylesheets.

<template>
  <button class="my-bytton">my button</button>
  <button class="btn btn-primary">bootstrap button</button>
</template>

<!-- scope custom css files -->
<style scoped src="@/assets/css/my-style.css"></style>

<!-- scope stylesheet files from packages -->
<style scoped lang="scss">
@import "~bootstrap/scss/bootstrap";
</style>