如何在vue中使用带范围的bootstrap4 css

Question

我有一个当前基于bootstrap 3的应用程序，我需要在vue组件中使用一些bootstrap4。

我的问题是，如果我使用：

   <style lang="scss">
       @import '~bootstrap/scss/bootstrap';
   </style>

然后，我的应用程序的所有布局都被弄乱了，因为它在各处而不是仅在组件中使用bootstrap4 css。 如果我使用

   <style scoped lang="scss">
       @import '~bootstrap/scss/bootstrap';
   </style>

旧的bootstrap3随处可见。

这是我试图运行的vue组件的代码

<template>
    <div class="main">
        <b-table striped hover :items="items"></b-table>
    </div>
</template>

<script>
    import BP_table from "../BusinessPlan/BP_table"
    export default {
        components:{
            'bp-table':   BP_table,
        },
        data() {
            return {
                items: [
                    {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
                    {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
                    {age: 89, first_name: 'Geneva', last_name: 'Wilson'},
                    {age: 38, first_name: 'Jami', last_name: 'Carney'}
                ]
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~bootstrap/scss/bootstrap';
</style>