-
-
Notifications
You must be signed in to change notification settings - Fork 78.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SASS deprecation warnings with version 1.77.7 - Mixed declarations #40621
Comments
I have also encountered this issue. My project, or adminlte, also requires some scss files that rely on bootstrap. If you want to eliminate this warning, I asked if you should release bootstrap 5.3.4 so that we can obtain scss files without warnings? |
I have encountered the same issues with my Vue/Vuetify project. Currently, I am receiving more then 60 different deprecation warnings for the latest version of the Vuetify package
|
FYI 1.77.8 of Dart Sass is out. |
Getting same warning for my Nuxt project. |
I got latest version of bootstrap, but I still got warnings |
`npm build` currently shows the deprecation warning below, which is about to be fixed in Bootstrap upstream, i.e. it should be gone with one of the next updates. twbs/bootstrap#40621 ``` Deprecation Warning: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`. More info: https://sass-lang.com/d/mixed-decls ┌──> node_modules/bootstrap/scss/_type.scss 38 │ font-family: $display-font-family; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration ╵ ┌──> node_modules/bootstrap/scss/vendor/_rfs.scss 136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) { 137 │ │ @content; 138 │ │ } │ └─── nested rule ╵ node_modules/bootstrap/scss/_type.scss 38:5 @import node_modules/bootstrap/scss/bootstrap.scss 17:9 @import resources/scss/app.scss 15:9 root stylesheet ```
|
i found same issue, how to fix please |
It's worked |
While waiting a fix... Edit the line in "package.json" |
- Downgraded sass version to avoid deprecation warnings that were introduced in the 1.77.7 release - See related issue for more details: twbs/bootstrap#40621
- Downgraded sass version to avoid deprecation warnings that were introduced in the 1.77.7 release - See related issue for more details: twbs/bootstrap#40621
今回は ncu --target minor -x vue,vuetify,typescript,sass -u で (更新するとまずい問題が発生するライブラリを除外しつつ) まとめて更新した sass は 1.77.7 以降大量の Deprecation Warning が出るようになってしまい使い物にならない… ref: twbs/bootstrap#40621
downgrading from y'all REALLY want me to use tailwind huh Edit: |
- DEPRECATION WARNING: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`. - twbs/bootstrap#40621 (comment)
The issue I encountered with my Vue/Vuetify project has been resolved by Vuetify. They fixed the problem in a newer version. So, if you run into these issues, the solution for Vue/Vuetify projects is to upgrade the Vuetify package from '^3.6.12' to '^3.6.14'. |
cause @latest(5.3.3) bootstrap doesnt support breaking changes in sass 1.77.7 and 1.77.8 twbs/bootstrap#40621 (comment)
Found a solution ✅I fixed all the warnings by shifting my mixins to the end of styles. (There were a lot 🤯) Earlier, this was giving me deprecation warnings: &__title {
@include title-font;
padding: 23px;
@include bp-desktop {
padding: 3vw 0 0;
}
&-inner {
font-weight: normal';
}
} You can see the bp-desktop and nested style is already at end, however the font mixin is before a normal padding style. Doing the following across the whole project fixed all warnings. &__title {
padding: 23px;
@include font-headline;
@include bp-desktop {
padding: 3vw 0 0;
}
&-inner {
font-weight: normal';
}
} I believe if you have any mixins or nested styles, move them after the regular styles. Put all regular styles at the start of the block. I hope this helps. 😊 |
it worked for meee. Tks bro |
It's working for me Thanks |
cause @latest(5.3.3) bootstrap doesnt support breaking changes in sass 1.77.7 and 1.77.8 twbs/bootstrap#40621 (comment)
Thank you @deepak-gangwar. You are right, I didn't need to downgrade or anything. Simply following the instruction provided in the warning helps resolve all the warnings. ✅ |
Keep this locked to 1.77.6 until bootstrap 5.3.4 is out to silence sass deprecation warnings. See this issue on bootstrap for details: twbs/bootstrap#40621
* feat: quiet sass deprecation warnings Keep this locked to 1.77.6 until bootstrap 5.3.4 is out to silence sass deprecation warnings. See this issue on bootstrap for details: twbs/bootstrap#40621 * fix: flaky specs
FYI, to disable the deprecation warnings with Vite: export default defineConfig(() => ({
css: {
preprocessorOptions: {
scss: {
silenceDeprecations: ['mixed-decls'],
},
},
},
})); |
This is a good solution. I have updated for my Nuxt app:
|
It's work for me, thank you! |
Thank you so much. Its worked. |
cause @latest(5.3.3) bootstrap doesnt support breaking changes in sass 1.77.7 and 1.77.8 twbs/bootstrap#40621 (comment)
cause @latest(5.3.3) bootstrap doesnt support breaking changes in sass 1.77.7 and 1.77.8 twbs/bootstrap#40621 (comment)
It worked after change sass version |
It worked here, ty ! |
cause @latest(5.3.3) bootstrap doesnt support breaking changes in sass 1.77.7 and 1.77.8 twbs/bootstrap#40621 (comment)
cause @latest(5.3.3) bootstrap doesnt support breaking changes in sass 1.77.7 and 1.77.8 twbs/bootstrap#40621 (comment)
For everyone using Gulp who wants to temporarily hide these warnings, there is silenceDeprecations option for this:
|
Prerequisites
Describe the issue
Using the latest version of the
sass
package (1.77.7
) there are deprecation warnings bysass
. The previoussass
version1.77.6
worked fine.Reduced test cases
npm i sass@latest
)npm run css-compile
Expected:
Actual:
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
No response
What version of Bootstrap are you using?
Latest
main
branchThe text was updated successfully, but these errors were encountered: