将 Bootstrap 包含到 Vue-Project 时出错答案

【问题标题】：Error when including Bootstrap into Vue-Project将 Bootstrap 包含到 Vue-Project 时出错
【发布时间】：2021-11-07 15:02:09
【问题描述】：

我正在尝试将 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。

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

我已经设法解决了这个问题：当通过vue add bootstrap-vue 包含 bootstrap-vue 时，您将被问到三个问题：

使用 babel/polyfill？ → 是的
使用 scss？ → 是的
您想在所有 SFC 组件中注入 var、函数和 mixin 吗？ → 如果您在此处回答“否”，则会导致上述错误。选择“是”。

要使 Bootstrap 正常工作，需要采取的最后一步是导入样式。您可以通过将以下内容添加到您的 main.js 来做到这一点：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

【讨论】：