将Bootstrap/Bootstrap-Vue导入作用域CSS

Question

我正在开发一个chrome扩展，并在我的Vue文件上使用Bootstrap-Vue。目前，我将bootstrap/bootstrap-vue导入到我的js文件中，但这会导致样式在全局级别上发生。理想情况下，我希望有一种方法使bootstrap只作用于我插入的文件。有没有办法在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';

Answer 2

何塞的回答几乎是正确的：

<style scoped>
@import 'bootstrap/dist/css/bootstrap.css';
@import 'bootstrap-vue/dist/bootstrap-vue.css';
</style>