Open KieranP opened 1 month ago
julien-deramond
commented
1 month ago 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:
sass dependency
kliehm
commented
3 weeks ago @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?
TimJohns
commented
3 weeks ago 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:
- Pinning the
sassdependency- Silencing the deprecation warnings
- Ignoring the warnings, as the deprecated features remain usable for now
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 vite.config.ts to temporarily silence the deprecation warnings, this is mine (I'm using Bootstrap 5.3.3, sass 1.80.5, Vue 3.5.12, Vike 0.4.199, ssr/ssg in effect, with a slightly customized scss/styles.css):
css: {
preprocessorOptions: {
scss: {
silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import']
},
}
},
maalvarado
commented
3 weeks ago This one works for Webpack:
{
loader: 'sass-loader',
options: {
sassOptions: {
silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import'],
}
}
}
rob4226
commented
3 weeks ago I use this config with Webpack and set the sass quietDeps option to hide any warnings from dependencies like bootstrap.
The @import warning comes from our own project's code importing bootstrap so still need to globally silence that warning:
{
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'],
},
},
}
evgeniy-vashchuk
commented
1 week ago For everyone using Gulp who also wants to temporarily hide these warnings, the silenceDeprecations option also works:
.pipe(sass({
silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'color-functions', 'global-builtin', 'import'],
outputStyle: config.isProd ? 'compressed' : 'expanded',
indentType: 'space',
indentWidth: 2,
includePaths: ['./node_modules']
}).on('error', plugins.notify.onError({ title: 'Error compiling SASS' })))
navidemad
commented
6 days ago 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
}
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