Laravel Mix | Bootstrap DEPRECATION WARNING: Using / for division is deprecated and will be removed

Question

I install bootstrap using npm and use scss to import it but when I try to compile,It just show endless warnings

npm install bootstrap 

app.scss file

@import "~bootstrap/scss/bootstrap";

and when I run dev

npm run dev

then I see Endless loop with this warning

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
253 │   1: $spacer / 4,
    │      ^^^^^^^^^^^
    ╵
    node_modules\bootstrap\scss\_variables.scss 253:6  @import
    node_modules\bootstrap\scss\bootstrap.scss 11:9    @import
    resources\css\app.scss 2:9                         root stylesheet

My webpack.mix

mix.js('resources/js/app.js', 'public/js')
.sass('resources/css/app.scss', 'public/css', [
    //
]);

Voter

Answer 1

As Brian Hannay mentioned in the comments, to downgrade to a specific version of a package, in this case SASS, you should:

1. change "sass": "^1.33.0", to "sass": "1.32.13", in package.json.

2. delete package-lock.json

3. delete node_modules folder

4. run npm install

Note that this will update all of your other packages within NPM. If you do not want to do that, simply remove "sass" from your package-lock.json and that particular folder within node_modules.

Terramycin

This does not work for me for some reason :-( – Panhandle

Can also use "sass": "~1.32.13", in case they release any more 1.32.* versions (probably unlikely though). – Rabjohn

Answer 2

As described in the SASS documentation, you can use the Sass migrator to automatically update your stylesheets to use math.div().

$ npm install -g sass-migrator

$ sass-migrator division **/*.scss

Unwonted

Note that this will change files in the node_modules! ..which is not something you would really want. Nice one for updating your own code though – Diviner

Nothing to migrate! That's the message I get :-/ – Tantamount

@BluE nah, "You can't fix font-awesome without moving it entirely into your project" is the message I get. – Virginium

Hilarious! This sass-migrator converts something / 2 to something * 0.5. – Batruk

Answer 3

Add quietDeps to your sass-loader config.

mix.js('resources/js/app.js', 'public/js')
.sass('resources/scss/app.scss', 'public/css', {
  sassOptions: {
    quietDeps: true,
  },
})

Nabataean

This don't seems to work. I still see all warnings – Willing

@Willing It does work. It bears mention that a) this option does not eliminate the warnings entirely; it merely reduces the number of times each warning is emitted to 5 instances per feature, and b) the underlying Dart Sass version must be at least 1.34.0, in which this switch was introduced. Finally, the release notes in the documentation seem to be incorrect in that they state Cap deprecation warnings at 5 per feature by default., but that does not seem to be the case unless this option is specified. – Adminicle

thanks. I ended up using a npm packet patcher so we fixed by our own and we can still using git and committed the patches for ours developer – Willing

Contrary to the comments above I can confirm this completely quietened the warnings for me. – Gretchen

Answer 4

As they are only warnings until Dart Sass 2.0.0 comes through i assume at this point you could ignore and wait on Bootstrap to update their package with the new division synthax math.div(...)

Got the same basic setup running, getting the same warnings.

Creon

Waiting out an endless loop isn't much of a solution. I've addressed the endless output by redirecting it. npm run dev 2>/dev/null works for me. Apparently you can also downgrade to saas <= 1.32.*, but I haven't tried that. – Decline

@BrianHannay Yes just downgrade, it removes the error and works. Use npm install [email protected] --save-dev to write sass package version to package.json and npm install [email protected] to downgrade. There is a French speaking guy on Y Tube that explains bootstrap 5 setup quite nicely (youtube.com/watch?v=gHD7sEvChaU). Did not understand a word he said, but definitely what he was doing. – Selway

I ended up using a npm packet patcher so we fixed by our own and we can still using git and committed the patches for ours developer – Willing

Answer 5

I cleared the warnings by:

1. deleting my node modules.
2. run npm cache clean --force
3. run npm install.

Marla

1. I didn't downvoted yout, but 2. it will not resolve the problem – Willing