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', [
    //
]);

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.

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