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

See : github.com/twbs/bootstrap/issues/39028

Boss COTIGA
– Boss COTIGA

2023-08-12 21:21:15 +00:00
Commented Aug 12, 2023 at 21:21 — Boss COTIGA
– Boss COTIGA, Commented Aug 12, 2023 at 21:21

Community · Accepted Answer · 2023-09-01 17:59:53Z

11

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);
  }
}

edited Sep 1, 2023 at 17:59

CommunityBot

11 silver badge

answered Aug 12, 2023 at 21:30

Boss COTIGA

1,04210 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Boss COTIGA Over a year ago

Solves the problem, but create new. "row row-cols-1 row-cols-md-2...." completely buggy :/ So, waiting Bootstrap fixes that, I modified package.json like this: "sass": "1.64.2", and npm update

Kudryavtsev Maxim · Accepted Answer · 2023-09-08 10:35:25Z

5

Another solution is downgrading sass to 1.64.2. It's work for me with Bootstrap 5.3.1

yarn add -D [email protected]

or

npm install --dev [email protected]

answered Sep 8, 2023 at 10:35

Kudryavtsev Maxim

3601 silver badge10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related