Импорт Bootstrap / Bootstrap-Vue в Scoped CSS

Question

Я разрабатываю расширение для Chrome и использую Bootstrap-Vue для своих файлов Vue. В настоящее время я импортировал bootstrap / bootstrap-vue в свой файл js, но это приводит к тому, что стилизация происходит на глобальном уровне. В идеале, я бы хотел, чтобы загрузчик работал только с моими вставленными файлами. Есть ли способ сделать это в разделе файла Vue?

// В файле .js

import VModal from 'vue-js-modal'
import BootstrapVue from 'bootstrap-vue'; 

// Я пробовал это в файле Vue, но никакого эффекта не показывалось

<style scoped src="bootstrap/dist/css/bootstrap.css"></style>
<style scoped src="bootstrap-vue/dist/bootstrap-vue.css"></style>

Answer 1

Чтобы импортировать стиль только внутри компонента, используйте его внутри тега <style>

  @import 'bootstrap/dist/css/bootstrap.css';
  @import 'bootstrap-vue/dist/bootstrap-vue.css';