Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Import scss in node_modules with a Vite resolve.alias fails in Vite 6 #19042

Open
7 tasks done
danielelkington opened this issue Dec 23, 2024 · 1 comment
Open
7 tasks done
Labels
feat: css p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@danielelkington
Copy link

Describe the bug

I am trying to import Bootstrap Functions from an scss file. In my Vite config I have aliased "@" to the src directory, and I am trying to use the "@" alias when importing the scss file from node_modules. This has worked fine through Vite 5, but breaks in Vite 6 with the error [sass] Can't find stylesheet to import.

Reproduction

https://stackblitz.com/edit/vitejs-vite-y6lwlhpr?file=src%2Fstyle.scss

Steps to reproduce

Open the reproduction link. Note that the app is failing with the error message [sass] Can't find stylesheet to import.
To see it working in Vite 5, in package.json change the Vite version to 5.4.11, and then in the terminal run npm install && npm run dev.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
    Memory: 8.90 GB / 31.81 GB
  Binaries:
    Node: 22.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.5 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @vitejs/plugin-vue: ^5.2.1 => 5.2.1
    vite: ^6.0.5 => 6.0.5

Used Package Manager

npm

Logs

No response

Validations

@sapphi-red sapphi-red added feat: css p3-minor-bug An edge case that only affects very specific usage (priority) labels Dec 23, 2024
@sapphi-red
Copy link
Member

It seems this only happens with modern API (which is the default from Vite 6).

For a workaround, you can set css.preprocessorOptions.sass.api: 'legacy' for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: css p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

No branches or pull requests

2 participants