在Adonis+Inertia环境中使用Bootstrap5（SCSS支持）遇报错求助

当前配置 #

webpack.config.js #

Encore.enableSassLoader()

app.scss #

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

$primary: #000;

@import '~bootstrap/scss/bootstrap';

报错信息（中文翻译） #

模块警告（来自 ./node_modules/sass-loader/dist/cjs.js）：
弃用警告：向全局 abs() 函数传入百分比单位已被弃用。未来版本中，这将生成一个由浏览器解析的 CSS abs() 函数。如需保留当前行为，请使用 math.abs(100%)；如需立即生成 CSS abs()，请使用 abs(#{100%})。

resources\scss\app.scss 1:1 divide()
node_modules\bootstrap\scss\mixins_grid.scss 59:12 row-cols()
node_modules\bootstrap\scss\mixins_grid.scss 85:13 @content
node_modules\bootstrap\scss\mixins_breakpoints.scss 68:5 media-breakpoint-up()
node_modules\bootstrap\scss\mixins_grid.scss 72:5 make-grid-columns()
node_modules\bootstrap\scss_grid.scss 38:3 @import
node_modules\bootstrap\scss\bootstrap.scss 20:9 @import
resources\scss\app.scss 9:9 root stylesheet

[ encore ] WARNING in ./resources/scss/app.scss
(./resources/scss/app.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13.use[1]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-13.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-13.use[3]!./resources/scss/app.scss)
模块警告（来自 ./node_modules/sass-loader/dist/cjs.js）：
弃用警告：向全局 abs() 函数传入百分比单位已被弃用。未来版本中，这将生成一个由浏览器解析的 CSS abs() 函数。如需保留当前行为，请使用 math.abs(100%)；如需立即生成 CSS abs()，请使用 abs(#{100%})。

resources\scss\app.scss 1:1 divide()
node_modules\bootstrap\scss\mixins_grid.scss 59:12 row-cols()
node_modules\bootstrap\scss\mixins_grid.scss 85:13 @content
node_modules\bootstrap\scss\mixins_breakpoints.scss 68:5 media-breakpoint-up()
node_modules\bootstrap\scss\mixins_grid.scss 72:5 make-grid-columns()
node_modules\bootstrap\scss_grid.scss 38:3 @import
node_modules\bootstrap\scss\bootstrap.scss 20:9 @import
resources\scss\app.scss 9:9 root stylesheet

解决办法 #

1. 升级Bootstrap到最新兼容版本 #

这个警告源于新版Sass（Dart Sass 1.45+）对全局abs()函数的语法变更，Bootstrap 5.2.0及以上版本已修复该兼容性问题，直接升级即可：

npm install bootstrap@latest

2. 导入Sass Math模块 #

若暂时无法升级Bootstrap，可在app.scss开头导入Sass的math模块，让Bootstrap调用正确的math.abs()方法：

@import 'sass:math';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

$primary: #000;

@import '~bootstrap/scss/bootstrap';

3. 配置Sass-loader使用Legacy API #

在webpack配置中给Sass-loader添加参数，启用旧版API兼容原有语法：
修改webpack.config.js：

Encore.enableSassLoader(options => {
  options.sassOptions = {
    api: 'legacy'
  };
});

4. 降级Sass版本 #

如果以上方案均不适用，可将Sass降级到1.44.0版本，避开该弃用规则：

npm install sass@1.44.0 --save-dev

内容的提问来源于stack exchange，提问作者marcelo.delta