将 Bootstrap 包含到 Vue-Project 时出错

Question

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

Answer 1

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

使用babel/polyfill？ → 是
使用scss？ → 是
是否要在所有 SFC 组件中注入变量、函数和混合？ → 如果您在这里回答“否”，则会导致所描述的错误。选择“是”。

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

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

将 Bootstrap 包含到 Vue-Project 时出错

Error when including Bootstrap into Vue-Project

vue.js

bootstrap-vue