Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

[grygork]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/devbox/zf6kxq

Bug description

Deprecation Warning on line 13, column 9 of node_modules/swiper/swiper.scss:
Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

Expected Behavior

Compatibility with Dart Sass 3.0.0.

Actual Behavior

No response

Swiper version

11.1.14

Platform/Target and Browser Versions

Dart Sass 3.0

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

You can check PR here: #7772

[Swineherdd]

same stuff mate

[Lovely-Ruby]

how to solve it? my console has so many warning like this. i use quietDeps = true but not useful.

[poconri]

same here

[sshiling]

same here

[TimurNazarov]

Change @import to @use
https://sass-lang.com/documentation/at-rules/use/

[knakamura13]

Change @import to @use https://sass-lang.com/documentation/at-rules/use/

I know this comment is getting downvoted, but I found this github thread while trying to migrate from @import to @use and thought I'd share how to properly migrate it yourself:

Change this:

@import 'stylesheet.scss'

to this:

@use 'stylesheet.scss' as *;
// or `@use 'stylesheet.scss' as stylesheet;`
// which can then be used like `font-size: stylesheet.$font-size;`

[heyrian]

same here

[Maxssobolev]

@knakamura13 , I changed it, but the warnings are still displayed in the console

Upd, works for me:
According to documentation https://vite.dev/config/shared-options.html#css-preprocessoroptions
I've installed sass-embedded package and set vite.config as

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
      },
    },
  },
})

After that, I changed all @import "file.scss" to @use "file.scss" as *
And the warnings are gone!

[Vladislav-096]

Is it necessary to use @use instead of @import now? I added css: { preprocessorOptions: { scss: { api: 'modern-compiler', }, }, }
also to my vite.config, but i still see warning

[SirH3nry]

What are my options if I've got (S)CSS rules/properties in the files I want to import globally as well, and not just "variables, mixins, and functions".
Reference: vitejs/vite#12549 (comment)

[Strateg81]

Watch message in console!
"... More info: https://sass-lang.com/d/legacy-js-api" .
"... You can use the Sass migrator to automatically update your stylesheets to use the module system.

$ npm install -g sass-migrator
$ sass-migrator module --migrate-deps your-entrypoint.scss

($ sass-migrator module --migrate-deps <path/to/style.scss>)

I done it - and it works!
But at the end I'got message in console: 'Nothing to migrate!'

[Beanmommo]

Change @import to @use https://sass-lang.com/documentation/at-rules/use/

I know this comment is getting downvoted, but I found this github thread while trying to migrate from @import to @use and thought I'd share how to properly migrate it yourself:

Change this:

@import 'stylesheet.scss'

to this:

@use 'stylesheet.scss' as *;
// or `@use 'stylesheet.scss' as stylesheet;`
// which can then be used like `font-size: stylesheet.$font-size;`

After changing to @use it shows a Deprecation Warning

[Strateg81]

After changing to @use it shows a Deprecation Warning

Yes, I got too! U must change your js-files.