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

user_9373864 0
Viewed 17009

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', [
    //
]);
laravel-mix twitter-bootstrap npm sass
5 Answers

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.

user_63901520

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

user_14667040

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,
  },
})
user_34815930

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.

user_159999990

I cleared the warnings by:

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