How to prevent URL transformation in CSS when using Vite et Express.js?

[WaningJupiter]

Hello,
I'm using Vite to serve and bundle the frontend assets with Express.js and TSX as template.
I insert assets (see more in doc)

export default function Main() {
...
return (
    <html lang='fr'>
        <script type='module' src='http://localhost:5173/@vite/client'></script>
        <link rel='stylesheet' href='http://localhost:5173/src/public/styles/theme.css'/>
         ...
)}

Here's my public folder structure

public/
├── fonts/
│   ├── font-a.woff
└── styles/
    └── theme.css

We can see here that to get font-a.woff inside theme.css, I had to set the url : ../fonts/font-a.woff

I build the output folder with the same structure as my public folder :

...
rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
            for (let name of assetInfo.names){
              if (name.endsWith('.css')) {
                return 'assets/style/[name].[ext]'
              }
              if (name.includes('sans-latin')){
                return 'assets/fonts/[name].[ext]'
            }}
}}

After running vite build, the url in theme.css has been transformed into

@font-face{
     ...
     url(/p/https://github.com/assets/fonts/font-a.woff2)
}

And the file can't find fonts any more.

I've read the topic at #22646, I doubt that this applies to my case.

How could I fix this ? Thanks.

PS: Please don't bomb me with AI generated answer.

[abbas0444]

Vite rewrites every url() in CSS at build time to point at the emitted file, using your base config. With the default base: '/', the result is a root-absolute URL like /assets/fonts/font-a.woff2.

That URL is correct as long as the build output is served from the site root. If Express serves dist under a sub-path (for example app.use('/static', express.static('dist'))), or doesn't serve the assets folder at /assets at all, the font 404s. That's what you're seeing.

You can't turn the rewriting off, but you can make the URL match how Express serves the files:

Option 1: relative URLs

// vite.config.ts
export default defineConfig({
  base: './',
  // ...
})

With a relative base, Vite makes CSS asset URLs relative to the CSS file. With your assetFileNames (CSS in assets/style/, fonts in assets/fonts/), the URL becomes ../fonts/font-a.woff2. That works no matter where Express mounts the folder.

Option 2: set base to the path Express uses

// Express
app.use('/static', express.static('dist'))

// vite.config.ts
base: '/static/',

The URL then becomes /static/assets/fonts/font-a.woff2.

Option 3: serve dist at the root

app.use(express.static('dist'))

The existing /assets/fonts/... URL then resolves as it is.

One more thing: in production your template shouldn't link to http://localhost:5173/.... Generate the build with build.manifest: true and read the built CSS/JS file names from .vite/manifest.json, as described in the backend integration guide. Otherwise the HTML won't point at the files you just built.

[umeraamir69]

Vite rewrites that CSS because you loaded it from /src/public/styles/theme.css. Anything under src goes through the CSS pipeline. url() then gets rewritten against base (default /), so the build emits /assets/fonts/font-a.woff2. assetFileNames only picks the output path. It does not stop the rewrite.

Pick one of these. Don't mix them.

Keep the CSS out of Vite

Put theme.css and the fonts in the real public/ folder (not src/public) and link them as static files:

<link rel="stylesheet" href="/styles/theme.css" />

public/ is copied as-is. A relative url(../fonts/font-a.woff) stays that way in dest and prod, as long as Express serves public in dest and dist in prod from /.

Let Vite rewrite, and serve dist from /

app.use(express.static('dist'))

Then /assets/fonts/font-a.woff2 is the right URL. If you mount static files under a prefix (/static), set that same prefix as base in vite.config.ts.

base: './' also works if you want the rewritten URLs to stay relative to the CSS file. Use that when the app is not at the domain root.

If the file is imported or linked from src, Vite will rewrite it. That is why the other thread you linked does not apply here.

[alanbabychan]

One detail that may help narrow this down: is public/ located at the project root, or is it actually src/public/?

Vite treats the root public/ directory differently from CSS imported or served from src/. Also, how are you mounting the production build in Express (express.static(...))? Those two details determine whether keeping the CSS static or letting Vite rewrite its asset URLs is the cleaner fix.

[WaningJupiter]

Hello,
Thanks for the answer. Mypublic/ is located at root/src/public, inside the project.
And yes, I mounted the public folder inside express.ts

app.use(express.static(path.join(dirname, '/public')))

Do you mind elaborate your point, please ?

[alanbabychan]

My point is that Vite treats the project-root public/ directory differently from assets inside src/. Files in the root public/ directory are served and copied to the build output as-is, whereas assets imported from src/ can be processed by Vite, including rewriting their URLs.
Since yours is located at src/public/ and served using express.static(), it may not follow Vite’s normal public-directory behavior. If these CSS files contain relative URLs to fonts, images, or other assets, those URLs could be affected by how Express serves the files and by the paths used in production.
Could you share an example of a CSS URL before and after the transformation, along with the relevant Vite base configuration? That would help determine whether the cleanest fix is to keep these files outside Vite’s asset processing or adjust the production asset paths.

[WaningJupiter]

I found a reponse here.
The answer is using the base url. https://vite.dev/guide/build.html#public-base-path

export default defineConfig({
  base: '',
  })

This solves the problem. The url is correctly written as :../fonts/font-a.woff from then on.

[Hrushikesh-ramilla]

Vite defaults to base: '/'. Whenever Vite processes a relative url(...) in CSS located in your source files, it resolves the file, bundles it into your build output, and rewrites the CSS URL as an absolute path against base (e.g., /assets/fonts/font-a.woff2). In a standalone client SPA served from domain root, that works fine. However, with an Express backend, static files are rarely served directly at the server root, or Express mounts them under a specific prefix (like /dist or /static). When the browser requests /assets/fonts/..., Express can't find it and returns a 404.

Here are the standard ways to handle this depending on how you want your assets served:

1. Set a relative base (base: './')

If you want Vite to keep CSS asset references relative instead of absolute, set base: './' (or base: ''):

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  base: './',
  // your rollupOptions...
})

Vite will calculate the relative distance between your CSS output (assets/style/theme.css) and font output (assets/fonts/font-a.woff2), rewriting the CSS to ../fonts/font-a.woff2. This works regardless of the URL path Express uses to serve your assets.

2. Align base with your Express static mount

If Express mounts your build directory under a prefix, configure Vite's base to match that mount path:

// vite.config.ts
export default defineConfig({
  base: '/dist/', // or '/static/'
})

// server.ts (Express)
app.use('/dist', express.static(path.join(__dirname, 'dist')))

Vite will output /dist/assets/fonts/font-a.woff2 in your CSS, which aligns directly with the route Express is serving.

3. Bypass Vite bundling using root public/ and root-relative URLs

If you don't need Vite to hash or process the fonts, place them in Vite's root public/ directory and reference them in CSS with a leading slash:

@font-face {
  font-family: 'FontA';
  src: url('/fonts/font-a.woff') format('woff');
}

Vite ignores URLs starting with /—it won't bundle, hash, or rewrite them. Files in public/ are copied directly to the root of dist/ during build, so Express can serve them statically from /fonts/....

4. Advanced URL rewriting via experimental.renderBuiltUrl

If you need finer control over how asset URLs are rewritten specifically for CSS:

// vite.config.ts
export default defineConfig({
  experimental: {
    renderBuiltUrl(filename, { hostType }) {
      if (hostType === 'css') {
        // Generates relative URLs from the CSS file to the asset
        return { relative: true }
      }
    },
  },
})

If this helps resolve the font URLs with your Express setup, please mark it as the answer so others running into this can find it!