Sass Deprecation Warning when building Vue project with Vite

[matvejs16]

Describe the bug

When using Vite with SCSS, a deprecation warning is displayed regarding the legacy JS API for Dart Sass. This warning appears despite Vite's built-in support for CSS pre-processors, including Sass. The warning message is as follows:

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api

This issue is related to Vite's handling of Sass compilation, as Vite documentation states that it provides built-in support for .scss and .sass files without the need for additional plugins:

Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed

The problem occurs in a clean Vite project with SCSS installed, indicating that it's not specific to any particular framework like Vue.

Reproduction

https://stackblitz.com/edit/vitejs-vite-icvcyy?file=index.html

Steps to reproduce

1. Create a new Vite project (e.g., using npm create vite@latest)
2. Add SCSS to the project dependencies (npm add -D sass)
3. Create a .scss file (e.g., src/style.scss) and import it in your main JavaScript file
4. Add some SCSS content to the file (e.g., $font-stack: Helvetica, sans-serif; body { font: 100% $font-stack; })
5. Run the dev server (npm run dev) or build the project (npm run build)
6. Observe the deprecation warning in the console output

These steps can be seen in action in the provided StackBlitz reproduction.

Note: The warning appears during both development and build processes of a Vite project that uses Sass/SCSS.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 52.68 GB / 62.67 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v20.12.2/bin/npm
npmPackages:
    @vitejs/plugin-vue: ^5.1.4 => 5.1.4 
    vite: ^5.4.7 => 5.4.7

Used Package Manager

npm

Logs

Click to expand!

vite:load 0.36ms [plugin] /src/components/sizeTables/menSizesComponent.vue?vue&type=style&index=0&scoped=b3a7a073&lang.scss +0ms
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-icvcyy (Open reproduction)

[userquin]

Try replacing sass with sass-embedded, the warning is from sass 1.79 iirc (vuetifyjs/vuetify#20489 (comment)).

[matvejs16]

Try replacing sass with sass-embedded, the warning is from sass 1.79 iirc (vuetifyjs/vuetify#20489 (comment)).

A bit different error text showing in sass-embedded:

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

More info: https://sass-lang.com/d/legacy-js-api

[matvejs16]

Also changed sass to sass-embedded in minimal reproduction

[userquin]

Add vite.config.js (https://stackblitz.com/edit/vitejs-vite-tvbvsa?file=vite.config.js,index.html,main.js,index.scss):

import { defineConfig } from 'vite';
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
      },
    },
  },
});

[matvejs16]

Thank you for the suggested solution. I've tested it and would like to share my findings:

1. Changing the dependency from sass to sass-embedded and adding the proposed configuration to vite.config.ts does indeed resolve the initial deprecation warning:

Add vite.config.js (https://stackblitz.com/edit/vitejs-vite-tvbvsa?file=vite.config.js,index.html,main.js,index.scss):

import { defineConfig } from 'vite';
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
      },
    },
  },
});

2. However, this solution introduces a new issue when css.devSourcemap is set to true. The following error occurs:

Sourcemap for "/path/to/project/src/components/SomeComponent.vue" points to missing source files
Sourcemap for "/path/to/project/src/App.vue" points to missing source files

To avoid this error, I had to remove the css.devSourcemap option from the configuration.

While the proposed solution does address the initial deprecation warning, I believe this issue should not be considered closed for the following reasons:

1. Vite should ideally update its codebase to use the new Sass API rather than relying on the deprecated one. This would provide a more robust, long-term solution without requiring users to modify their configurations or dependencies.

2. The conflict with css.devSourcemap is concerning, as it forces users to choose between using the modern Sass API and having proper sourcemap support for their CSS/SCSS.

Regarding the devSourcemap issue:
The problem likely occurs because sass-embedded with the 'modern-compiler' API generates sourcemaps differently than the legacy API. Vite may not be fully compatible with this new sourcemap format, leading to the "missing source files" error.

Possible solutions to explore:

1. Investigate if there's a way to configure sass-embedded to generate sourcemaps compatible with Vite's expectations.
2. Update Vite's sourcemap handling to be compatible with the output from sass-embedded's modern API.
3. Provide a compatibility layer in Vite that can translate between the different sourcemap formats.

I would appreciate if the Vite team could look into these issues further:

1. Updating Vite to use the modern Sass API natively.
2. Resolving the compatibility issue between sass-embedded with 'modern-compiler' API and Vite's sourcemap handling.

This would ensure that users can benefit from both the latest Sass features and Vite's excellent developer experience, including accurate sourcemaps.

[userquin]

iirc there is 1 issue about sources, iirc Hiroshi fixed it, maybe not yet released.

EDIT: PR still open #18113

[matvejs16]

iirc there is 1 issue about sources, iirc Hiroshi fixed it, maybe not yet released.

EDIT: PR still open #18113

Thank you for the information. I appreciate the update on the status of these issues. I'll keep an eye on #18113 for further developments. Is there anything else I should be aware of or any temporary workarounds you'd recommend in the meantime?

[matvejs16]

Also I have an additional question regarding the Sass API in Vite:

Is there already a PR in progress to update Vite to use the modern Sass API by default? Or will we need to continue using the following configuration for the foreseeable future:

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

I'm currently working on a project that will soon go into production, and I want to ensure everything is set up correctly to avoid future issues. What would you recommend as the best approach for a production-ready setup regarding Sass compilation in Vite?

Also, are there any known issues or limitations with using the 'modern-compiler' API that I should be aware of for a production environment?

Your insights would be greatly appreciated as I want to make informed decisions for the long-term stability of the project.

[userquin]

use sass entry, that's weird it should be configured by Vite:

preprocessorOptions: {
  sass: {
    api: 'modern-compiler',
  },
},

[userquin]

What would you recommend as the best approach for a production-ready setup regarding Sass compilation in Vite?

Also, are there any known issues or limitations with using the 'modern-compiler' API that I should be aware of for a production environment?

Your insights would be greatly appreciated as I want to make informed decisions for the long-term stability of the project.

I cannot help/suggest you about scss/sass, I'm not an expert sorry, I'm helping Hiroshi with some tests and Nuxt 3 integration in Vuetify Nuxt module.

[matvejs16]

use sass entry, that's weird it should be configured by Vite:

preprocessorOptions: {
  sass: {
    api: 'modern-compiler',
  },
},

No, using sass instead of scss gives me same error:

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

More info: https://sass-lang.com/d/legacy-js-api

[userquin]

How about adding both?

[matvejs16]

How about adding both?

With both, behaviour is same as without sass property object