bootstrap-vue-js模态无法显示

Question

我正在尝试显示基本的bootstrap-vueJS模态，但由于某些原因，某些方法无法正常工作。

这是显示的样子：

这是文档中显示模式的代码：

<div>
    <b-button v-b-modal.modal-1>Launch demo modal</b-button>

    <b-modal id="modal-1" title="BootstrapVue">
        <p class="my-4">Hello from modal!</p>
    </b-modal>
</div>

这是我的app.scss文件的外观：

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
//@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/dist/bootstrap-vue.min.css';

这些是我package.json文件中的依赖项：

    "dependencies": {
    "admin-lte": "^2.4.18",
    "bootstrap-vue": "^2.1.0",
    "bootstrap-vue-datatable": "^1.0.7",
    "fine-uploader": "^5.16.2",
    "laravel-vue-datatable": "^0.4.2",
    "moment": "^2.24.0",
    "paginationjs": "^2.1.5",
    "vue-router": "^3.1.3"
}

感谢您的帮助！