javascriptcssbootstrap-4sassbootstrap-sass

Deprecation Warning in Bootstrap SCSS


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

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 there anything wrong with using this version combination, or is there any other issue? How can I resolve it?


Solution

  • 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.