Warning: Obsolete Notification Detected in Bootstrap SCSS

Trying to customize Bootstrap by selecting only the necessary components and importing them into a style.scss file from Bootstrap sass is causing an issue. When I import and compile the 3 required components, I receive a series of Deprecation Warnings.

SCSS:

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

First Console Warning:

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

The tool versions being used are:

Bootstrap: 4.3.1, Sass: 

1.33.0 compiled with dart2js 2.13.0

Is there an issue with this version combination or any other problem? How can this be resolved?

cssbootstrap-4sassbootstrap-sass

Answer №1

I finally found a solution!

After some investigation, it seems that the latest version of SASS is causing warnings. To temporarily stop these warnings, consider downgrading to an earlier version - this should not cause any issues.

In summary, switching to Sass: "1.32.13" is recommended.

Answer №2

If you've encountered this issue recently with versions 1.77.7 or 1.77.8, one solution is to revert back to version 1.77.6

npm I -D <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccbfadbfbf8cfde2fbfbe2fa">[email protected]</a> --save-exact

Answer №3

To avoid the warning message regarding division in my code, I explored the various sass options available at Sass-lang

and selected the most suitable option for my sass setup

As for my situation, I encountered this particular warning message:

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

Therefore, I included the "quietDeps" option in my sass configuration

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

Upon running my tasks again, everything functioned correctly without any further issues

Answer №4

To solve division issues, consider using the sass-migrator tool which can effectively replace all instances of "/" with math.div and incorporate "@use "sass:math"" as well.

Visit this link for more information about the sass-migrator tool.

Answer №5

Ensure you are using bootstrap version 4.6.1, 4.6.2, or 5.2.0

Note:

Starting from bootstrap 4.6.1, they have incorporated the use of math.div() function instead of / as a separator.

For example,

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

should now be written as

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

Answer №6

After investigation, it appears that the issue is stemming from compatibility issues between Bootstrap and the Sass version being used in Metronic Vue.

The solution is to adjust the versions of sass and sass-loader in your package.json file to the following versions and then update dependencies using either yarn or npm install:

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

Answer №7

Encountering a similar issue in Laravel 11 with Vite, I managed to resolve it by suppressing warnings and including the silenceDeprecations parameter in my vite.config.js:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn the position of a div element that appears following the lazy loading of images

I am struggling to make a div sticky below a set of lazy load images. The issue lies in the fact that the offset of the div keeps changing due to the lazy loading images pushing it down. There are 4 images with unknown heights, making it difficult to acc ...

javascriptjqueryhtmlcss

CSS z-index property not functioning properly for Flowplayer on Firefox browser

I am attempting to create a layered div using z-index, with one of the layers containing a flowplayer. Once the layer is properly created, I plan to update the div's z-index value based on the logic of the program. The following code functions correct ...

htmlcssflowplayer

What is the best way to add space between div elements with bootstrap classes?

For my project, I am utilizing bootstrap and I need to create space between divs. Here is the code I am using: <div className="container"> <div className="row"> <div className="col-lg-4 col-md-4 col-sm-12 col-12 box">a</div&g ...

cssbootstrap-4

Modify the color of the sidebar menu items in R Shiny

I am trying to find out the tag name that can be used to change the color of the blue line in the menuItem image on Shiny Dashboard. I have successfully changed the background color of the sidebar menu item using the following code: .skin-blue .main-sideb ...

cssrshinyshinydashboard

Hiding elements with CSS using the display:none property and using the :

Trying to display an image when hovering over another image. Works well in Safari, but Chrome and Firefox fail to load the image properly. Have searched for solutions related to visibility:hidden but none seem to solve this cross-browser issue. HTML being ...

csshover

What prevents Bootstrap 4 from breaking on mobile devices?

Here is the code I am working with: <div class="container-fluid"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> When I view this code in t ...

csstwitter-bootstrapbootstrap-4

Enhancing Option Element Height with Padding in Bootstrap 5

Is there a way to adjust the height or increase padding of the option element within a standard select box using Bootstrap 5? More information can be found at: https://getbootstrap.com/docs/5.0/forms/select/ Could you provide an example code to demonstrat ...

cssbootstrap-5

What is the reason for Javascript's inability to apply height using the ex unit measurement?

Is there a way to use JavaScript in order to increase the height of an element based on its current CSS height value? I've been able to do it using px units, but not with ex units. Can anyone provide a solution for this? Here is the HTML structure: ...

javascripthtmlcss

Steps for including a 'close' button in Lightbox on Bootstrap 4

Apologies for my English... I found this code here, but it was missing the close button. Above on the Website I have, <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.clou ...

javascriptbootstrap-4

Optimizing Your CSS for Faster Page Loading

Seeking various opinions here - my goal is to enhance the loading speed of my website, and a suggestion from Google Pagespeed is to remove unused CSS from the CSS file for each page. Currently, I am utilizing a single master CSS file for all pages on the ...

cssseoperformance

Selecting the Static Modal backdrop will enlarge the Modal Content and introduce a scrollbar to the backdrop

I am encountering an issue with Bootstrap 4.4.1 where clicking outside of a static backdrop modal causes the size of the Modal content to scale up and adds a scrollbar to the backdrop. This problem persists in both Chrome and Firefox. How can I fix this? ...

csstwitter-bootstrapbootstrap-4

Include the className attribute on the contents received from dangerouslySetInnerHTML

What is the best way to define the className attribute for a div that contains 'hello world'? <div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} /> One option is to set it on the outer div like this: &l ...

cssreactjsstyling

I want to hide jqvmap when viewing on mobile devices

I'm currently working on my website at . I have a template that I'm using as a guide, but I want to make the map disappear on mobile view and replace it with a dropdown list. Can anyone suggest what code I should use for this? Appreciate any hel ...

javascripthtmlcssresponsive-designjqvmap

Phonegap - Retaining text data in a checklist app beyond app shutdown

This is my first time developing an app with Phonegap. I am looking to create a checklist feature where users can input items into an input field. However, I am struggling with figuring out how to save these items so that they remain in the checklist even ...

javascriptjqueryhtmlcsscordova

What is the reason behind my styled component only displaying the final state in its className logs?

Here is my implementation using styled components with the version "@types/styled-components": "^5.1.26" and I'll provide you with an example of my code. // index.tsx import React, { useEffect, useState } from 'react'; i ...

javascriptcssreactjstypescriptstyled-components

Styling an HTML Table with CSS to Add Cell Padding

I am trying to add padding to a single cell in my table. I created a class for the td element and specified its style in my CSS file as shown below: .itemQuantity { padding-right:30px; text-align:right; background-color: #EEE; } However, the ...

htmlcsshtml-tablecellpadding

Chrome Bug with Fixed Position Background

Just finished creating a website that features fixed images as backgrounds with text scrolling on top of them. I've noticed an issue when using Chrome - the scrolling stops briefly between backgrounds, pauses for about a second, and then resumes. I&ap ...

htmlcssgoogle-chromescroll

Styling Hyperlinks with CSS

Recently, I've been playing around with links and using CSS to style them. I have successfully achieved the normal look and implemented a cool hover effect using a:hover. However, I'm facing some challenges when it comes to customizing the appear ...

htmlcss

Focus the text on a specific letter

I am attempting to align a phrase in the center of my navigation bar, which has been built using Bootstrap. Currently, the navbar appears as follows: Centered Navbar title My goal is to center the "|" symbol with the text adjacent to it on both sides, ...

htmlcsstwitter-bootstrapnavbarcentering

Setting a defined width and using block display will not solve the issue of the margin:auto not working

rough sketch of my desired design I am trying to center a label on the page. The parent container is set to a width of 100% and the label itself is displayed as a block element with margin set to auto. When I set the width of the label to a smaller value, ...

htmlcss