Solve 'Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.' in Astro

If you are building a website with Astro and SASS and you are getting this error when running builds or your dev environment:

Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

There’s a very simple fix. The issue is caused by Vite, which runs Astro builds under the hood trying to use the legacy API of the sass npm module. To fix it, you simply need to edit the Vite configuration. In Astro, you do that by using the vite parameter in the astro.config.mjs file. So you simply need to go to that file and add this option:

// @ts-check
import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
    // ... all your configuration
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    api: "modern-compiler"
                }
            }
        }
    }
});

That will tell Vite to use the new compiler for Sass and stop using the deprecated one, which should remove the warning from your builds.