reactjssassvitedart-sass

The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0

I was using create-react-app before and now I switched the same project to vite and everything working fine except I am getting a warning log as follows

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

I want to get rid of these warnings from log while development and build the application. Following are my dependencies

{
  "dependencies": {
    "@heroicons/react": "^2.1.5",
    "@tanstack/react-table": "^8.17.3",
    "i18next": "^23.12.1",
    "i18next-browser-languagedetector": "^8.0.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-i18next": "^14.1.3",
    "react-indiana-drag-scroll": "^2.2.0",
    "react-toastify": "^10.0.5",
    "recharts": "^2.13.0-alpha.4",
    "recoil": "^0.7.7",
    "sass": "^1.79.1",
    "uuid": "^10.0.0"
  }
}

Node version is v22.7.0

Solution

  • The default API when using Vite is currently set to legacy, but you can change it in your vite.config.[js/ts].

    export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler' // or "modern"
      }
    }
  }
})

    Reference: https://vitejs.dev/config/shared-options#css-preprocessoroptions