标题重写为: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时,可关闭的对话框就按照我预期的方式运行了。