[Bug Report][3.7.2] [email protected] Legacy API deprecation warnings

[jakubmatisak]

Environment

Vuetify Version: 3.7.2
Vue Version: 3.5.6
Browsers: Chrome 128.0.0.0
OS: Windows 10

Steps to reproduce

After upgrading sass to 1.79.1 in my project there are many warnings.
"Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0."

In version 1.79.0 was this warning message added by sass team. In reproduction link are included release notes.

Expected Behavior

Change Legacy API

Actual Behavior

Warnings everywhere :)

Reproduction Link

https://github.com/sass/dart-sass/blob/main/CHANGELOG.md

[userquin]

If you're using Vite in your application try replacing sass (legacy) with sass-embedded (modern): https://vuetifyjs.com/en/features/sass-variables/#build-performance

[KaelWD]

This is the responsibility of whatever bundler you're using, not vuetify.

[weicheng000]

...
import * as sass from "sass";

export default defineConfig({
...
css :{
    preprocessorOptions : {
      scss: {
        api: "modern",
        importers: [
          new sass.NodePackageImporter()
        ]
      },
      sass: {
        api: "modern",
        importers: [
          new sass.NodePackageImporter()
        ]
      },
    }
  },
...
})

Maybe can help you, if you are using vite.

[jakubmatisak]

Thank you all for help. I will replace sass with sass-modern. My bad.

[jakubmatisak]

If this would help anyone with the same problem in future:

1. I have changed dependency from sass to sass-embedded.
2. I have addded:

    css: {
        preprocessorOptions : {
            scss: {
                api: "modern",
            },
        }
    },

to vite.config.mjs

After these changes everything works fine.
Thanks everyone.

Edit November 2: We have changed modern-compiler to modern, because npm run build could not end when build was executed more than once.

[MetRonnie]

I was confused why this was closed as not planned when there were deprecated calls in the vuetify SCSS files, e.g.:

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

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

   ╷
48 │     'lighten-5': map-get($shades, 'black'),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    ..\..\..\vuetify\lib\styles\settings\_colors.scss 48:18  @forward

Looks like these have been updated in the latest release though (3.7.3): 2b22da1