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.

[felixxxxxs]

While it's necessary for everyone to update their own stylesheets to use @use and @forward instead of @import, this issue is about the Swiper stylesheets still using @import.
Fixing my own stylesheets will not remove the deprecation warnings coming from the Swiper stylesheets. The Swiper stylesheets need to be updated accordingly. Or am I missing something? 🤔

[ohabash]

sass used to be the best part of my job.

[suxscribe]

So no way to use global variables now without having to import them in each and every scss component?

[skyzavr]

I found a possible solution to this problem using sass (scss) and webpack (not sure if this is a good way to solve it):
So, I have an entry file that imports other files with common styles/variables, and I need them to be global.
So, first, we need to add a rule to webpack.config.js:

module.exports = {
 // ...
  module: {
   // ...
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: `@use 'pathToFile.scss' as *;`,
            },
          },
        ],
      },
    ],
  },
};

And in this file we need to import other files using @forward:

@forward 'pathToAnotherFile.scss';

So now we can use our variables in the app:

.header{
  color: $primary;
}