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

scss paths starting with / on secondary sass modules stopped working on v6 only on Windows, can't solve with custom sass importer. #18919

Closed
7 tasks done
miguel-leon opened this issue Dec 9, 2024 · 1 comment · Fixed by #18945
Labels
feat: css p3-minor-bug An edge case that only affects very specific usage (priority) windows only

Comments

@miguel-leon
Copy link

miguel-leon commented Dec 9, 2024

Describe the bug

main.scss has @use "/src/foo/foo.scss" which works, but the same line in another file errors with [plugin:vite:css] [sass] File URL path must be absolute.
It works on v5 and errors on v6.

Tried to add a sass importer to solve the problem in vite config -> css -> preprocessorOptions -> sass -> importers. But it errors before and doesn't reach the importer.

Reproduction

https://stackblitz.com/edit/vitejs-vite-qnqdkutz

Steps to reproduce

Not reproducible in linux, so the stackblitz link does not error.

After npm create vite add the following files:

vite-project/
└── src/
    ├── main.scss
    ├── foo/
    │   └── foo.scss
    └── bar/
        └── bar.scss

The content of main.scss

@use "/src/foo/foo.scss";
@use "/src/bar/bar.scss";

@debug foo.$foo;

The content of foo.scss

$foo: "hello";

The content of bar.scss

@use "/src/foo/foo.scss";

@debug foo.$foo;

And to index.html add <link rel="stylesheet" href="/src/main.scss" />

Then npm run dev.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1255U
    Memory: 16.24 GB / 31.83 GB
  Binaries:
    Node: 22.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.14.4 - C:\ProgramData\chocolatey\bin\pnpm.EXE
  Browsers:
    Edge: Chromium (129.0.2792.89)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    vite: ^6.0.1 => 6.0.3

Used Package Manager

npm

Logs

Click to expand!
  VITE v6.0.3  ready in 222 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
  vite:html-fallback Rewriting GET / to /index.html +0ms
  vite:time 55.30ms /index.html +0ms
  vite:resolve 30.76ms /src/main.js -> C:/.../vite-project/src/main.js +0ms
  vite:load 5.67ms [fs] /src/main.js +0ms
  vite:resolve 4.51ms ./style.css -> C:/.../vite-project/src/style.css +23ms
  vite:resolve 4.66ms ./javascript.svg -> C:/.../vite-project/src/javascript.svg +0ms
  vite:resolve 4.85ms ./counter.js -> C:/.../vite-project/src/counter.js +0ms
  vite:import-analysis 11.83ms [4 imports rewritten] src/main.js +0ms
  vite:transform 18.19ms /src/main.js +0ms
  vite:resolve 0.54ms /@vite/client -> C:/.../vite-project/node_modules/vite/dist/client/client.mjs +9ms
  vite:resolve 1.44ms /src/main.scss?direct -> C:/.../vite-project/src/main.scss?direct +5ms
  vite:cache [304] /src/main.js +0ms
  vite:time 0.37ms /src/main.js +44ms
  vite:load 20.16ms [plugin] /src/javascript.svg +38ms
  vite:import-analysis 0.28ms [no imports] src/javascript.svg +21ms
  vite:transform 0.84ms [skipped] /src/javascript.svg +19ms
  vite:load 21.46ms [plugin] /vite.svg +1ms
  vite:import-analysis 0.09ms [no imports] /vite.svg +1ms
  vite:transform 0.46ms [skipped] /vite.svg +1ms
  vite:load 22.45ms [fs] /src/style.css +1ms
  vite:hmr [self-accepts] src/style.css +0ms
  vite:import-analysis 0.96ms [0 imports rewritten] src/style.css +2ms
  vite:transform 2.09ms /src/style.css +3ms
  vite:load 19.63ms [fs] /@vite/client +3ms
  vite:resolve 0.10ms @vite/env -> C:/.../vite-project/node_modules/vite/dist/client/env.mjs +28ms
  vite:import-analysis 1.78ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs +15ms
  vite:transform 13.46ms /@vite/client +14ms
  vite:time 35.76ms /@vite/client +28ms
  vite:load 41.39ms [fs] /src/counter.js +16ms
  vite:import-analysis 0.08ms [no imports] src/counter.js +3ms
11:12:09 PM [vite] Internal server error: [sass] File URL path must be absolute
  ╷
1 │ @use "/src/foo/foo.scss";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\bar\bar.scss 1:1  @use
  src\main.scss 2:1     root stylesheet
  Plugin: vite:css
  File: C:/.../vite-project/src/main.scss?direct:1:1
  [sass] File URL path must be absolute
    ╷
  1 │ @use "/src/foo/foo.scss";
    │ ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    src\bar\bar.scss 1:1  @use
    src\main.scss 2:1     root stylesheet
      at Object.wrapException (C:\...\vite-project\node_modules\sass\sass.dart.js:2305:43)
      at Object.throwWithTrace0 (C:\...\vite-project\node_modules\sass\sass.dart.js:32304:15)
      at C:\...\vite-project\node_modules\sass\sass.dart.js:87489:19
      at _wrapJsFunctionForAsync_closure.$protected (C:\...\vite-project\node_modules\sass\sass.dart.js:5020:15)
      at _wrapJsFunctionForAsync_closure.call$2 (C:\...\vite-project\node_modules\sass\sass.dart.js:38043:12)
      at _awaitOnObject_closure0.call$2 (C:\...\vite-project\node_modules\sass\sass.dart.js:38037:25)
      at Object._rootRunBinary (C:\...\vite-project\node_modules\sass\sass.dart.js:5437:18)
      at StaticClosure.<anonymous> (C:\...\vite-project\node_modules\sass\sass.dart.js:124040:16)
      at _CustomZone.runBinary$3$3 (C:\...\vite-project\node_modules\sass\sass.dart.js:39496:39)
      at _FutureListener.handleError$1 (C:\...\vite-project\node_modules\sass\sass.dart.js:38260:21)
  vite:time 399.34ms /src/main.scss +51ms

Validations

@miguel-leon miguel-leon changed the title scss paths starting with / on secondary sass modules stopped working on v6 only on Windows. scss paths starting with / on secondary sass modules stopped working on v6 only on Windows, can't solve with sass custom importer. Dec 9, 2024
@miguel-leon miguel-leon changed the title scss paths starting with / on secondary sass modules stopped working on v6 only on Windows, can't solve with sass custom importer. scss paths starting with / on secondary sass modules stopped working on v6 only on Windows, can't solve with custom sass importer. Dec 9, 2024
@sapphi-red sapphi-red added windows only feat: css p3-minor-bug An edge case that only affects very specific usage (priority) labels Dec 9, 2024
@sapphi-red
Copy link
Member

Made a fix here: main...sapphi-red:vite:fix/sass-slash-importer-windows
I'll make a PR once sass/sass#3998 has a response and if the fix is needed on Vite side.

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

Successfully merging a pull request may close this issue.

2 participants