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
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: