vue.js - 将 Bootstrap 包含到 Vue-Project 时出错
问题描述
我正在尝试将 Bootstrap-Vue 包含在我的(新的)Vue 项目中。我使用了 Bootstrap-Vue Vue CLI 3 插件 ( vue add bootstrap-vue
)。启动应用程序npm run serve
会导致以下错误:
Failed to compile.
./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
29 │ -webkit-tap-highlight-color: rgba($black, 0); // 5
│ ^^^^^^
╵
node_modules/bootstrap/scss/_reboot.scss 29:37 @import
src/assets/scss/vendors/bootstrap-vue/index.scss 4:9 @import
src/App.vue 20:9 root stylesheet
我的main.js
样子是这样的:
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import './assets/app.scss'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
bootstrap-vue.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
app.scss
$body-bg: #000;
$body-color: #111;
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
我很确定这与导入某些文件有关,但我无法弄清楚。我正在使用 Vue 版本 2.6.11。
解决方案
我已经设法解决了这个问题:当包含 bootstrap-vue via 时vue add bootstrap-vue
,你会被问到三个问题:
- 使用 babel/polyfill?→ 是的
- 使用scss?→ 是的
- 您想在所有 SFC 组件中注入 vars、functions 和 mixin 吗?→ 如果您在此处回答“否”,则会导致上述错误。选择“是”。
使 Bootstrap 正常工作需要采取的最后一步是导入样式。您可以通过将以下内容添加到您的来做到这一点main.js
:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
推荐阅读
- node.js - 下载的 PDF 文件损坏
- html - Angular 模板,去掉 div 和空格(去掉了 div,但不去掉空格)
- java - 我应该如何在 Eclipse IDE 中折射写得不好的反向波兰表示法 java 代码
- react-native - 如何使用“@material-ui”中的移动垂直步进器?
- vb.net - 列出并选择声卡播放声音
- python - “'x' 必须是非空数字向量”rpy2 错误:为什么它不起作用?
- python - 正则表达式:使负面环视“更贪婪”
- python - 井字游戏出错,但没有错误输出
- java - 如何在 RecyclerView 中更新 CardViews 之间的点
- apache-kafka - 版本从 0.10.2.2 升级到 2.1.1 后的 Kafka 错误“由于发现时间索引损坏,时间索引文件”