SASS deprecation warnings with version 1.77.7 - Mixed declarations about bootstrap HOT 23 CLOSED

npm i [email protected] --save-exact

from bootstrap.

i found same issue, how to fix please

npm i [email protected] --save-exact

It's worked

from bootstrap.

downgrading from 1.77.8 to 1.74 does not resolve the issue

y'all REALLY want me to use tailwind huh

Edit: npm i [email protected] --save-exact works.

from bootstrap.

The issue appears to throw warnings but still builds for me ... but warnings are never fun to have. Hoping this gets an update soon.

from bootstrap.

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?

from bootstrap.

While waiting a fix... Edit the line in "package.json"
"sass": "^1.74",
by :
"sass": "1.77.6",
and do :
npm update

from bootstrap.

Getting same warning for my Nuxt project.

from bootstrap.

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. 😊

from bootstrap.

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 ^3.6.12. 😅

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/vuetify/lib/styles/tools/_typography.sass
3 │     font-weight: $font-weight
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
  ╵
  ┌──> node_modules/vuetify/lib/styles/tools/_position.sass
3 │ ┌     &--#{$position}
4 │ │       position: #{$position} if($important, !important, null)
  │ └─── nested rule
  ╵
    node_modules/vuetify/lib/styles/tools/_typography.sass 3:3           typography()
    node_modules/vuetify/lib/components/VSystemBar/VSystemBar.sass 23:5  @content
    node_modules/vuetify/lib/styles/tools/_layer.scss 9:5                layer()
    node_modules/vuetify/lib/components/VSystemBar/VSystemBar.sass 4:1   @use
    plugin-vuetify:components/VSystemBar/VSystemBar.sass 2:1            root stylesheet

from bootstrap.

FYI, to disable the deprecation warnings with Vite:

export default defineConfig(() => ({
  css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ['mixed-decls'],
      },
    },
  },
}));

from bootstrap.

For now, we can silence the warning until Bootstrap v5.3.4 is released #40651 (comment)

This can be done by using silenceDeprecations option. https://sass-lang.com/documentation/js-api/interfaces/options/#silenceDeprecations

Configs changes for webpack:

module.exports = {
  // ...

  module: {
    rules: [
      // ...

      {
        test: /\.s?[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                silenceDeprecations: ['mixed-decls'],
              },
            },
          },
        ],
      },
    ],
  },
};

from bootstrap.

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.

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. ✅

from bootstrap.

FYI 1.77.8 of Dart Sass is out.
https://github.com/sass/dart-sass/releases/tag/1.77.8

from bootstrap.

npm i [email protected] --save-exact

thanks machan

from bootstrap.

https://sass-lang.com/documentation/breaking-changes/mixed-decls/

from bootstrap.

It's working for me Thanks
npm i [email protected] --save-exact

from bootstrap.

I got latest version of bootstrap, but I still got warnings

from bootstrap.

i found same issue, how to fix please

from bootstrap.

npm i [email protected] --save-exact

It worked for me too. Thank you so much.

from bootstrap.

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 ^3.6.12. 😅

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/vuetify/lib/styles/tools/_typography.sass
3 │     font-weight: $font-weight
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
  ╵
  ┌──> node_modules/vuetify/lib/styles/tools/_position.sass
3 │ ┌     &--#{$position}
4 │ │       position: #{$position} if($important, !important, null)
  │ └─── nested rule
  ╵
    node_modules/vuetify/lib/styles/tools/_typography.sass 3:3           typography()
    node_modules/vuetify/lib/components/VSystemBar/VSystemBar.sass 23:5  @content
    node_modules/vuetify/lib/styles/tools/_layer.scss 9:5                layer()
    node_modules/vuetify/lib/components/VSystemBar/VSystemBar.sass 4:1   @use
    plugin-vuetify:components/VSystemBar/VSystemBar.sass 2:1            root stylesheet

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'.

from bootstrap.

npm i [email protected] --save-exact

it worked for meee. Tks bro

from bootstrap.

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:

export default defineNuxtConfig({
   devtools: { enabled: false },
   ssr: false,
   vite: {
      css: {
         preprocessorOptions: {
            scss: {
               silenceDeprecations: ["mixed-decls"]
            }
         }
      }
   },

}

from bootstrap.

npm i [email protected] --save-exact

It's work for me, thank you!

from bootstrap.