CODEWITHSUNDEEP
javascriptcssbootstrap-4sassbootstrap-sass
deekeh
deekeh

Reputation: 762

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?

Upvotes: 16

Views: 37702

Answers (7)

Mina
Mina

Reputation: 17554

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 -D [email protected] --save-exact

Upvotes: 9

Harkály Gergő
Harkály Gergő

Reputation: 841

In Laravel 11 with Vite I had the same problem, I solved it by hide warnings, added silenceDeprecations line to vite.config.js:

export default defineConfig({
    css: {
        preprocessorOptions: {
            scss: {
                api: 'modern-compiler', // or "modern"
                silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import']
            }
        }
    },

Upvotes: 5

Muhammad Ibrar
Muhammad Ibrar

Reputation: 1

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",

Upvotes: 0

Christopher C Okonkwo
Christopher C Okonkwo

Reputation: 181

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);

Upvotes: 1

L. Kvri
L. Kvri

Reputation: 1733

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

Upvotes: 0

Albaz
Albaz

Reputation: 935

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

Upvotes: 2

Narb
Narb

Reputation: 216

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.

Upvotes: 20

Related Questions