Error when using BootStrap 5 with Adonis and Inertia, with scss support

Question

Error when using BootStrap with Adonis and Inertia, with scss support.

I've been trying for days to make it work and I can't. Below is the configuration.

Would anyone know how I can resolve this issue?

Grateful for the attention

webpack.config.js

Encore.enableSassLoader()

app.scss

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

$primary: #000;

@import '~bootstrap/scss/bootstrap';

Error

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

Answer 1

While waiting for a fix, edit:

node_modules/bootstrap/scss/mixins/_grid.scss

Replace percent with equal number

Result

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