在支持 scss 的情况下，将 BootStrap 5 与 Adonis 和 Inertia 一起使用时出错

在支持 scss 的情况下，将 BootStrap 与 Adonis 和 Inertia 一起使用时出错。

几天来我一直在努力让它发挥作用，但我做不到。下面是配置。

有人知道我该如何解决这个问题吗？

感谢您的关注

webpack.config.js

Encore.enableSassLoader()

app.scss

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

$primary: #000;

@import '~bootstrap/scss/bootstrap';

错误

Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser. To preserve current behavior: math.abs(100%) To emit a CSS abs() now: abs(#{100%}) More info: https://sass-lang.com/d/abs-percent

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) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser. To preserve current behavior: math.abs(100%) To emit a CSS abs() now: abs(#{100%}) More info: https://sass-lang.com/d/abs-percent

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

在等待修复时，编辑：

node_modules/bootstrap/scss/mixins/_grid.scss

将百分比替换为相同的数字

结果

@mixin row-cols($count) {
  > * {
    flex: 0 0 auto;
    width: divide(1, $count);
  }
}

另一个解决方案是将sass降级为1.64.2。 Bootstrap 5.3.1 对我有用

yarn add -D [email protected]

或者

npm install --dev [email protected]