dart-sass 1.80.0+ throwing a lot of deprecations #40962
Comments
|
This was mentioned in this comment while searching for a solution to the deprecations introduced in version 1.79. Dropping Node Sass will be necessary to fix this issue. In the meantime, a few options for Bootstrap users:
|
|
@julien-deramond Also for overwriting SASS variables, it is necessary to set the variables like $grid-breakpoints before and then import bootstrap-grid. Since @import is deprecated, how would this work with @use, which needs to be at the start of the code? |
Thanks @julien-deramond and team - as always, I appreciate all the work that's gone into Bootstrap, as well as the guidance on this issue. For anyone looking for a quick starting point for their own |
|
This one works for Webpack: |
|
I use this config with Webpack and set the sass The {
loader: 'sass-loader',
options: {
// https://github.com/webpack-contrib/sass-loader#sassoptions
sassOptions: {
// If set to true, Sass won’t print warnings that are caused by dependencies (like bootstrap):
// https://sass-lang.com/documentation/js-api/interfaces/options/#quietDeps
quietDeps: true,
silenceDeprecations: ['import'],
},
},
} |
|
For everyone using Gulp who also wants to temporarily hide these warnings, the silenceDeprecations option also works: |
|
If you are using Ruby on Rails with the gem https://github.com/rails/dartsass-rails, you can do: config/initializers/dartsass.rb: Rails.application.config.dartsass.build_options |= ["--silence-deprecation=import"].sassrc: {
"includePaths": ["node_modules"],
"silenceDeprecations": [
"import"
],
"quietDeps": true
} |
I tried to migrate my own code but got stuck with bootstrap because it does not use the new functionalities. Here is a simple explanation if you want to override the navbar variables with default bootstrap variables. /*
Before
*/
// had to copy the variables from bootstrap if you want to use them without changing them because they are not imported yet
$primary: #00b5ff;
$gray-900: #212529;
$body-color: $gray-900;
$navbar-default-color: $body-color;
$navbar-default-link-color: $body-color;
$navbar-default-link-hover-color: $primary;
$navbar-default-link-active-color: $primary;/*
After
*/
// path to the bootstrap variable file
@use "../../../../../../../../node_modules/bootstrap/scss/variables" as bs_vars; // with `as` you can use a custom name for the "import"
$navbar-default-color: bs_vars.$body-color;
$navbar-default-link-color: bs_vars.$body-color;
$navbar-default-link-hover-color: bs_vars.$primary;
$navbar-default-link-active-color: bs_vars.$primary;The only "issue" here is, that we have to add the
|
version 1.80.0+ throws a lot of warnings: twbs/bootstrap#40962
|
This works for overriding variables with the use syntax and dart-sass: This clears up the import deprecation warnings for me with angular v19, which is using dart-sass 1.80.7 under the hood. |
|
A note that Vite v6 now defaults to SASS Modern API by default. While adding |
I have made a package to have all scss bootstrap files using the There is still some warning I have to fix for For your comment about the need to add the |
- @codemirror/lang-html: 6.4.8 → 6.4.9 - @fortawesome/fontawesome-svg-core: 6.5.1 → 6.7.1 - @fortawesome/free-solid-svg-icons: 6.5.1 → 6.7.1 - @parcel/transformer-sass: 2.11.0 → 2.13.2 - bootstrap: 5.3.2 → 5.3.3 - flag-icons: 7.1.0 → 7.2.3 - nette-forms: 3.3.5 → 3.5.2 - parcel: 2.11.0 → 2.13.2 TODO: Ton of sass deprecations: twbs/bootstrap#40962
|
In Rollup with |
- recommended by Bootstrap team - see twbs/bootstrap#40962
I have these imports no idea how to handle this @import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// include what we are using this seems to be the minimum
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/bootstrap-utilities';
@import 'bootstrap/scss/bootstrap-grid'; // row and col
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/alert';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/modal';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/utilities'; |
Any ideas how to resolve something like this @use 'src/styles/variables' as *;
$theme-colors: (
primary: $primary,
secondary: $secondary,
success: $success,
info: $info,
warning: $warning,
danger: $danger,
light: $surface,
dark: $gray
) !default;
// Button
$btn-border-radius: $custom-radius;
$btn-border-radius-lg: $custom-radius;
$btn-font-size: 0.875rem;
$alert-border-radius: 0;
$modal-backdrop-bg: rgb(0, 0, 0, 0.5);
$min-contrast-ratio: $custom-contrast-ratio;
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// include what we are using this seems to be the minimum
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/bootstrap-utilities';
@import 'bootstrap/scss/bootstrap-grid'; // row and col
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/alert';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/modal';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/utilities';
|
Could you find a solution? |
|
@jnessier @ricardosaracino I'm sorry, but I do not have a solution. I've spent some time this evening playing around with it and what I've found is that:
Unfortunately, I believe clearing up these deprecations with newer versions of dart-sass is going to require a serious overhaul of how bootstrap's own SCSS is written. For the time being (I would expect probably for the life of bootstrap@5 at least) you're going to have to live with the deprecation messages from the sass compiler or suppress them. Eventually they will turn into breaking changes. The documentation says that will be when dart-sass 3.0 is released. |
|
@jptrosclair Thanks for your large response. I've also spent some time yesterday to find a solution. I learned a lot about SASS, but nothing to get a workaround except of suppressing the deprecation messages. I really looks like that Bootstrap has to totally overhaul their SCSS. So get ready for a rewritten Bootstrap SCSS in the next major release. Personally I see it as a chance to get an even more modularized Bootstrap than today. |
|
Just ran into this on a new Rails 8 project with Boootstrap 5. @jptrosclair and @Alpine418 explained, there is no easy solution to resolve actual warnings, but if you want to just silence them until new Bootstrap ( rebuilt for Dart 3.0) comes out, here is a simple way to silence warnings. Notice CLI flags for sass --silence-deprecation=import --quiet-depsI'm using ━━━ Warnings ━━━━━━━━━━━━━━━━━━━━━━━━━━━
-q, --[no-]quiet Don't print warnings.
--[no-]quiet-deps Don't print compiler warnings from dependencies.
Stylesheets imported through load paths count as dependencies.
--[no-]verbose Print all deprecation warnings even when they're repetitive.
--fatal-deprecation Deprecations to treat as errors. You may also pass a Sass
version to include any behavior deprecated in or before it.
See https://sass-lang.com/documentation/breaking-changes for
a complete list.
--silence-deprecation Deprecations to ignore.
--future-deprecation Opt in to a deprecation early.Here is entire package.json file from my Rails project {
"name": "app",
"private": "true",
"dependencies": {
"@popperjs/core": "^2.11.8",
"autoprefixer": "^10.4.20",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"nodemon": "^3.1.9",
"postcss": "^8.4.49",
"postcss-cli": "^11.0.0",
"sass": "^1.83.1"
},
"scripts": {
"build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --silence-deprecation=import --quiet-deps",
"build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
"build:css": "bun run build:css:compile && bun run build:css:prefix",
"watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"bun run build:css\""
},
"browserslist": [
"defaults"
]
}
|
dart-sass is currently adding several deprecation warnings starting in order to prepare their 2.0 version. Those are displayed by webpack-dev-server in overlay at page load. Disable all the recent ones (v1.77+), and enable quietDeps to avoid warnings from dependencies. Unfortunately, there is no way to disable them all without listing them, so it might be necessary to add the upcoming ones if any. See: - https://sass-lang.com/documentation/js-api/interfaces/deprecations/ - sass/dart-sass#2352 - twbs/bootstrap#40962 - https://www.reddit.com/r/bootstrap/comments/1e6i6qg/how_you_guys_are_dealing_with_sass_deprecation/
Prerequisites
Describe the issue
dart-sass has deprecated a bunch of things that bootstrap currently uses:
@importhas been deprecated in favor of@usecolorReduced test cases
Just import bootstrap into project using dart-sass >= 1.80.0
What operating system(s) are you seeing the problem on?
macOS, Linux
What browser(s) are you seeing the problem on?
No response
What version of Bootstrap are you using?
5.3.3
The text was updated successfully, but these errors were encountered: