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

[grygork]

Check that this is really a bug

• [X] 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

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

Would you like to open a PR for this bug?

• [X] I'm willing to open a PR

You can check PR here: https://github.com/nolimits4web/swiper/pull/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

[ayochim]

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: https://github.com/vitejs/vite/discussions/12549#discussioncomment-7038298

[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;
}

[martinille]

Downgrading sass to ~1.32.0 helped me.

[headless-kjh]

this one is helpful @include meta.load-css("style.scss");

[blented]

agree w/ @martinille , best option is to downgrade, after a bunch of digging the @use methods don't provide a viable replacement for @import

such a shame to break an entire workflow, they should just keep both options as there are pros and cons to each

[Roozenlz]

Downgrading sass to ~1.32.0 helped me.

I use ~1.77.5 helped me.

[DJHONATANFN]

VUE CLI 3, BOOTSTRAP 5.3.3 Y SASS 1.77.5 me funciona perfecto...

const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, css: { loaderOptions: { scss:{ additionalData: @import '~@/assets/scss/index.scss'; } } } });

[hiepduc24089]

try to change @import to @use but you need to reference variables with the namespace if you use variables

[fabpico]

Downgrade. npm install [email protected].

[IvanLudvig]

this is why web development sucks

[hammermaxmann]

SASS should be renamed SUS

[alfaniM]

Downgrading sass to ~1.32.0 helped me.

I use ~1.77.5 helped me.

thanks, u save my life

[Kassim-exe]

Dowgrading to npm i [email protected] also removes the warning Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

[ohabash]

How long will downgrading be the official solution?

[exrhizo]

Ran into this here: https://github.com/palantir/blueprint/pull/7251

library doesn't have a long term plan, one of those things where people depend on the api in ways you don't want perhaps

I also downgraded to ~1.77.5