标题重写为：VueJS中的Bootstrap问题：app.scss未加载且b-alert dismissable按钮显示异常
P粉609866533
2023-08-31 14:18:15
<p>这是我第一次在我的vuejs项目中使用bootstrap，有两件事对我来说不清楚。</p>
<p>我按照这里的bootstrap in vuejs指南一步一步地添加，直到我不得不创建app.scss，我决定把它放在assets文件夹中，一旦我在main.js中导入该文件，我就会从vuejs得到一个长长的错误。</p>
<p>第二个问题：
我决定放弃app.scss的全局样式（如果这是正确的术语），只是尝试一下bootstrap，作为一个最基本的例子，我在这个例子bootstrap playground中找到了这个例子，然后我把它复制粘贴到我的vue项目中。</p>
<p>现在我看到一些按钮的样式，但结果与前面提到的网站的输出不同。</p>
<p>我的关闭按钮是灰色的，带有边框和X，位于文本的左侧。playground示例中的X按钮位于文本的右侧，样式正确，没有边框，颜色是绿色/蓝色。</p>
<p>这可能是非常基本的东西，但如果有人告诉我我做错了什么，我会很感激，因为我按照文档并且诚实地搜索了3个小时，没有解决方案。</p>
正如Hiws在上面的评论中指出的那样，这可能是由于错误的Bootstrap版本导致的。当我安装了Bootstrap 5时，我遇到了完全相同的问题，当我改为使用Bootstrap 4时，可关闭的对话框就按照我预期的方式运行了。