Description
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
- 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.