Vue引导- Vue安装后抛出错误

Question

我正试图将引导Vue添加到一个新项目，安装后，它显示此错误是否有任何修复?

编译失败，出现1个错误
11:44:32 error in./src/App.vue ? vue&类型= style&指数= 0,id = 7 ba5bd90& lang = scss

语法错误:SassError: Undefined variable。││
-webkit-tap-highlight-color: rgba($black, 0);//5│^^^^^^ node_modulesbootstrapscss_reboot. exe
@import srcassets SCSS vendor bootstrap-vueindex。scss 9@ import src App。创世纪3:9根样式表

@。/node_modules/vue-style-loader ? ?裁判——8-oneOf-1-0 !。/node_modules css-loader/dist/cjs.js ? ?裁判——8-oneOf-1-1 !。/node_modules vue-loader-v16/dist/stylePostLoader.js !。/node_modules/postcss-loader/src ? ?裁判——8-oneOf-1-2 !。/node_modules sass-loader/dist/cjs.js ? ?裁判——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&类型= style&指数= 0,id = 7 ba5bd90& lang = scss4:14-419 15:3-20:5 16:22-427 @./src/App.vue ? vue&类型= style&指数= 0,id = 7 ba5bd90& lang = scss @/src/应用程序。Vue @ ./src/main.js @ multi(webpack) -dev-server/客户? http://192.168.1.4:8080& sockPath =/sockjs-node(webpack)/热/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"
}
}

Answer 1

boot -vue目前不支持vue 3.0

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

Answer 2

在你的App.vue中，你需要导入_custom。SCSS before bootstrap样式表，因为它包含引用的变量。

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

注意这个错误不是由于使用Vuejs 3造成的