CSS assets lost during production build when using resolve.alias with customResolver, works fine in dev mode

[codestepwell]

Describe the bug

In vite.config.js, I configured path aliases using resolve.alias. When using:

{
  find: /^\$\/(.*)/, // Matches `$/xxx`
  replacement: fileURLToPath(new URL('./src/path1/$1', import.meta.url)),
}

Both dev and build modes work perfectly. However, when I use:

{
  find: /^&\/(.*)/, // Matches `&/xxx`
  replacement: '$1',
  customResolver: (source) => {
    return fileURLToPath(
      new URL('./src/path2/' + source, import.meta.url)
    );
  },
}

The dev mode works fine, but in build mode, I found that components imported via the custom alias (&/) do not have their CSS successfully bundled.

I had to use the customResolver approach because my actual use case involves more complex path handling (the previous example was simplified).

Initially, I tried implementing this using a Vite plugin with resolveId(source, importer). However, I found that it couldn't properly intercept resource imports (e.g., background-image: url(&/assets/images/download.png) in CSS files). This might be due to incorrect implementation on my part.

As an alternative, I switched to the customResolver method within resolve.alias, which successfully captured resource imports. But now I'm facing the CSS bundling issue described earlier.

Reproduction

https://stackblitz.com/edit/vitejs-vite-5nxpzqss?file=package.json

Steps to reproduce

When running npm run dev, both imported components:

import GreenHelloWorld from '$/HelloWorld.vue';
import RedHelloWorld from '&/HelloWorld.vue';

render their CSS styles correctly.

However, after running npm run build, the CSS for the component imported via the customResolver-defined alias (&/HelloWorld.vue, located at /src/path2/HelloWorld.vue) fails to work. This happens because the component's CSS is not generated or bundled during the build process.

System Info

System:
    OS: Windows 10
  Binaries:
    Node: 23.11.0
    npm: 10.9.2
  Browsers:
    Chrome: 137.0.7151.104
  npmPackages:
    @vitejs/plugin-vue: ^6.0.0 => 6.0.0
    vite: ^7.0.0 => 7.0.0

Used Package Manager

npm

Logs

No response

Validations

• [x] Follow our Code of Conduct
• [x] Read the Contributing Guidelines.
• [x] Read the docs.
• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] 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.
• [x] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Moved to plugin-vue repo as this doesn't happen with normal CSS. Also this seems to only happen on Windows.

[sapphi-red]

It works fine if \\ is replaced with /.

{
  find: /^&\/(.*)/, // Matches `&/xxx`
  replacement: '$1',
  customResolver: (source) => {
    return fileURLToPath(
      new URL('./src/path2/' + source, import.meta.url)
    ).replaceAll('\\', '/');
  },
}

[codestepwell]

It works fine if \\ is replaced with /.

{ find: /^&/(.*)/, // Matches &/xxx replacement: '$1', customResolver: (source) => { return fileURLToPath( new URL('./src/path2/' + source, import.meta.url) ).replaceAll('\', '/'); }, }

Appreciate the workaround! I've tested it and it works for now. Thanks for your help!