12

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?

deekeh
  • 675
  • 1
  • 6
  • 21
  • 2
    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.) – Brebber May 25 '21 at 16:31

4 Answers4

12

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.

deekeh
  • 675
  • 1
  • 6
  • 21
Narb
  • 136
  • 1
  • 4
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

Albaz
  • 905
  • 12
  • 21
  • 1
    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 – Viktor Born Jun 29 '22 at 10:51
0

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

L. Kvri
  • 1,456
  • 4
  • 23
  • 41
0

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);
JeffC
  • 22,180
  • 5
  • 32
  • 55
Christopher C Okonkwo
  • 131
  • 2
  • 7
  • 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. – tacoshy Mar 25 '23 at 14:19
  • 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. – Christopher C Okonkwo Mar 26 '23 at 15:57
  • 1
    A more detailed explanation would be more helpful than "Do X". Explain WHY this fixes the problem. – JeffC Mar 27 '23 at 01:34
  • @JeffC I have added more explanation – Christopher C Okonkwo Apr 03 '23 at 07:56
  • 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. @tacoshy 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. – loopmode Jul 19 '23 at 08:12