Skip to content

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

Open
@codestepwell

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions