Deprecation Warning in Bootstrap SCSS

Question

I am trying to create custom bootstrap by importing only the required components into a style.scss file from bootstrap sass. However, I get a chain of many Deprecation Warnings when I import and compile the 3 required components.

SCSS:

@import "./bootstrap-4.3.1/scss/functions";
@import "./bootstrap-4.3.1/scss/variables";
@import "./bootstrap-4.3.1/scss/mixins";

Console Warning (first of the many):

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

Recommendation: math.div($spacer, 2)

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

    ╷
298 │ $headings-margin-bottom:      $spacer / 2 !default;
    │                               ^^^^^^^^^^^
    ╵
    bootstrap-4.3.1\scss\_variables.scss 298:31  @import
    style.scss 3:9                               root stylesheet

I am using the following versions of tools:

Bootstrap: 4.3.1, Sass: 1.33.0 compiled with dart2js 2.13.0

Is anything wrong with using this version combination, or any other issue? How can I resolve it?

Truong

Bootstrap 4 is based on LibSass. Compiling with DartSass may be possible but not be the best idea. The change to DartSass came with BS version 5. And indeed DartSass differs from LibSass and is not backward compatible. The warnings are based on some functions which still exists in DartSass as off something like an "inbetween" backward compatibilty but will be removed in further versions. (Indeed the missing backward compatibility is hard discussed in the comunity.) – Catgut

Answer 1

I found a solution here.

Essentially, what I understand is that a new version of SASS is throwing warnings. You can downgrade your version to stop the warnings for now and doing so shouldn't break anything either.

tl:dr You should use Sass: "1.32.13" instead.

Generally

Works fine, thanks! Do you know if it has support for latest sass in Bootstrap-5? – Truong

Sure thing. No idea about BS5 sorry, just found this solution while working the same error in my own project. – Generally

This is not the best solution its just a workaround – Oriya

Bootstrap 4.6.1 also fixed these warnings. – Rockbottom

Answer 2

If You wanna hide the warrning this issue You can review sass options from Sass-lang

and add the best option for your sass

In my case, I have this issue

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

So I added "quietDeps" option to my sass

 .pipe(sass({
            outputStyle: 'compressed',
            quietDeps: true
    }).on('error', sass.logError))  

and worked correctly after run my tasks again

Oriya

Honestly, using quietDeps you're not resolving the issue, you're just hiding dependency warnings. Docs you provided tells it clearly: "This is useful for silencing deprecation warnings that you can’t fix on your own. However, please also notify your dependencies of the deprecations so that they can get fixed as soon as possible!". To actually resolve the issue it makes sense to replace deprecated / with math.div – Sochor

Answer 3

If you had this issue recently with the 1.77.7 or 1.77.8 versions, a solution is to downgrade to 1.77.6

npm i [email protected] --save-exact

Transmigrant

Answer 4

You can use the sass-migrator for fix division problems, it able to replace all place the / with math.div and also include the @use "sass:math";

https://sass-lang.com/documentation/cli/migrator

Transitory

Answer 5

Use bootstrap version 4.6.1 or 4.6.2 or 5.2.0

Edit:

From bootstrap 4.6.1 they updated to math.div() function instead of / as a separator.

Example

$headings-margin-bottom: $spacer / 2;

becomes

$headings-margin-bottom: math.div($spacer, 2);

Oleum

The issue is not the Bootstrap version but SASS. Also, it is rarely a solution to change a Framework version on a running product. Incompatibility issues might be more time and money costly than maintaining older versions. – Bogosian

version 4.* and 5.* are semver and not breaking changes. I know the issue is bootstrap SASS, but bootstrap fixed it in those minor updates. – Oleum

A more detailed explanation would be more helpful than "Do X". Explain WHY this fixes the problem. – Ruthanneruthe

@Ruthanneruthe I have added more explanation – Oleum

I don't understand the downvotes and the fuzz. As of now, and given Bootstrap@4 is already used as stated by the OP, this answer is concise and correct. @Bogosian your comment is is not well informed and actually misleading to newcomers. Why would you downgrade sass when you can safely upgrade bootstrap via minor version bump? It doesn't matter whether you change bootstrap or sass in a running project. You'll have to change at least one of them, or live with the warnings. – Pinwheel

Answer 6

We reproduced this warning, seems like it is related to bootstrap compatibility with a sass version used in Metronic Vue.

To fix this you can change sass and sass-loader versions in your package.json to versions listed below and then reinstall dependencies with yarn or npm install command.

"sass": "1.55.0",
"sass-loader": "13.2.0",

Papaveraceous