根据Bootstrap-vue的文档,用npm安装Bootstrap-vue。
//在系统终端中: npm install vue bootstrap-vue bootstrap
然后在自己的app.scss中引入,方便后面中自定义样式。
//在app.scss中 @import 'node_modules/bootstrap/scss/bootstrap'; @import 'node_modules/bootstrap-vue/src/index.scss';
然后在程序入口app.js中引入此app.scss。
//在程序入口app.js import '../css/app.scss'
但是在终端中运行npm run dev进行资源编译的时候,在终端就会报错。
ERROR in ./resources/css/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[3]!./resources/css/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
11 │ $b-custom-control-indicator-size-lg: $custom-control-indicator-size * 1.25 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap-vue\src\_variables.scss 11:38 @import
node_modules\bootstrap-vue\src\index.scss 7:9 @import
resources\css\app.scss 3:9 root stylesheet
根据github上的bug反馈,发现原因是…………Bootstrap本体已经更新到v5了。
但是Bootstrap-vue只支持Bootstrap v4。
解决办法:
修改npm的package.json,降低Bootstrap的安装版本:
//在package.json中 "bootstrap": "^5.0.2", 改为 "bootstrap": "^4.6.0",
然后在系统终端重新执行npm install,重新安装bootstrap。
最后npm run dev时候就可以正常编译了。
文章评论
点赞➕1,十分感谢。
俺也有一样的问题。但是我看到这个答案就解决了。给作者点赞!