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

Question

Hello everyone Why does the error "Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0." occur? I have searched for an answer in other help requests, but I have not found an answer. Answers by type:

css: {
    preprocessorOptions: {
        scss: {
          api: "modern-compiler", // or "modern", "legacy"
          importers: [],
        },
    },
},

They don't help!

Here is my Vite config:

// default.config.ts
export const defaultConfig: InlineConfig = {
    css: {
        preprocessorOptions: {
            scss: {
                api: "modern-compiler",
                importers: [],
            },
        },
    },
    plugins: [
        tsPaths(),
        solidPlugin(),
    ],
    resolve: {
        alias: {
            "@styles": path.resolve(__dirname, "src/styles"),
        },
    },
};

// dev.config.ts
export default defineConfig({
    server: {
        host: "0.0.0.0",
        port: 3000,
        strictPort: true,
        open: true,
        hmr: true,
    },
    ...defaultConfig,
});

My package file:

{
    "name": "project",
    "version": "0.0.0",
    "description": "",
    "type": "module",
    "scripts": {
        "dev": "vite --host",
        "build": "VITE_APP_ENV=production vite build",
        "serve": "vite preview"
    },
    "license": "MIT",
    "devDependencies": {
        "@fullhuman/postcss-purgecss": "^6.0.0",
        "@types/node": "^22.5.5",
        "@types/pako": "^2.0.3",
        "@types/postcss-normalize": "^9.0.4",
        "cssnano": "^7.0.6",
        "lightningcss": "^1.27.0",
        "postcss": "^8.4.47",
        "postcss-combine-duplicated-selectors": "^10.0.3",
        "sass": "^1.78.0",
        "solid-devtools": "^0.29.2",
        "svgo": "^3.3.2",
        "terser": "^5.32.0",
        "typescript": "^5.3.3",
        "vconsole": "^3.15.1",
        "vite": "^5.0.11",
        "vite-bundle-visualizer": "^1.2.1",
        "vite-plugin-html-minifier-terser": "^3.8.0",
        "vite-plugin-solid": "^2.8.2",
        "vite-plugin-solid-svg": "^0.8.1",
        "vite-tsconfig-paths": "^5.0.1"
    },
    "dependencies": {
        "@solidjs/router": "^0.14.5",
        "lottie-web": "^5.12.2",
        "pako": "^2.1.0",
        "solid-js": "^1.8.11"
    }
}

I tried adding and removing scss and sass settings - it didn't help. I deleted plugins, changed the config, deleted packages - it didn't help. Where is the error - I do not understand

UPDATE: Why is the question different from the others? The problem relates to the Vite version. The solution to other problems from other authors has been found, but my case is related to vite, more precisely with version 5.4.x (I suspect that this is 5.4.6, since everything works in 5.4.5)

UPDATE2:I just checked other versions of vite below 5.4.0 and the problem persists. At the same time, just a day ago, everything was fine

Wild · Accepted Answer · 2024-10-01 21:29:52Z

0

Can you check your config? Something tells me that it gets overwritten at some point. The following code should solve the issue as it forces you to use "modern" instead of "legacy." Legacy sends the warnings but not the modern/modern-compiler options. Docs: https://vitejs.dev/config/shared-options.html#css-preprocessoroptions

  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
      }
    }
  }

answered Oct 1, 2024 at 21:29

Wild

193 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachindra · Accepted Answer · 2025-10-26 10:08:30Z

0

This is not a breaking change yet, but its always good to update the code as per the enhancements. I tried below updates:

Change the webpack.config.js

{
    loader: "sass-loader",
    options: {
        sassOptions: {
            api: "modern", 
            // api: "modern-compiler",         
        },
    },
}

2. Update the sass-loader; webpack and webpack-cli to the latest versions:

npm install sass-loader@latest webpack@latest webpack-cli@latest --save-dev

3. Delete node_modules and generate the build again:

rm -rf node_modules
npm run start

answered Oct 26 at 10:08

Sachindra

7,2197 gold badges36 silver badges43 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related