Vue bootstrap-vue安装后抛出错误

Posted 2023-02-22

【中文标题】Vue bootstrap-vue安装后抛出错误

【英文标题】：Vue bootstrap-vue throwing error after installation

【发布时间】：2021-10-24 14:56:30

【问题描述】：

我正在尝试将 bootstrap Vue 添加到新项目中，安装后显示此错误，有什么解决方法吗？

编译失败，出现 1 个错误 11:44:32 错误 ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss

语法错误：SassError：未定义的变量。 ╷ 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 3:9 根 样式表

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./ node_modules/vue-loader-v16/dist/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-v16/dist??ref-- 0-1!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss 4:14-419 15:3-20:5 16:22-427 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss @ ./src/App.vue @ ./src/main.js @multi (webpack)-dev-server/client?http://192.168.1.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我的构建看起来像这样

  "name": "bootstrap-test",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "@babel/polyfill": "^7.11.5",
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.17.3",
    "core-js": "^3.6.5",
    "mutationobserver-shim": "^0.3.7",
    "popper.js": "^1.16.1",
    "portal-vue": "^2.1.7",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1",
    "vue-cli-plugin-bootstrap-vue": "~0.8.1"
  

【参考方案1】：

在您的 App.vue 中，您需要在引导样式表之前导入 _custom.scss，因为它包含引用的变量。

<style lang="scss">
    @import "~@/assets/scss/vendors/bootstrap-vue/_custom"; 
    @import "~@/assets/scss/vendors/bootstrap-vue/index";  
</style>

注意这个错误不是因为使用了 Vuejs 3

【参考方案2】：

bootstrap-vue 目前不支持vue 3.0

见https://github.com/bootstrap-vue/bootstrap-vue/issues/5196