Laravel中编译Bootstrap-vue的scss文件时报SassError: Undefined variable错误

根据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时候就可以正常编译了。