Vite 7.x Relative Asset Paths for CSS & Fonts

Problem

Vite 7.x bundles CSS and font assets into the same folder, but the generated CSS uses absolute URLs like /assets/font.woff2, which break when deploying to subfolders or static hosting (not at domain root). This causes font files to fail loading unless you manually fix the paths.

Solution

This repo demonstrates a quick fix:

• Vite config (vite.config.js):
  Ensures all assets are output to the same folder and disables the base option for relative paths.
• Post-build script (scripts/fix-font-paths.js):
  After building, rewrites all /assets/... URLs in CSS files to ./... so they work anywhere.

Usage

1. Build your project:

   npm run build

   This runs Vite and then the fix script.

2. Deploy the build/ folder anywhere—subfolder, static host, etc.
   Fonts and CSS will load correctly.

How it works

• vite.config.js:
  • base: "" for relative URLs.
  • All assets (fonts, CSS, SVGs) go to build/assets/.
  • Manifest enabled for asset mapping.
• scripts/fix-font-paths.js:
  • Finds all CSS files in build/assets/.
  • Replaces url(/assets/...) with url(./...).

Why?

Vite's default behavior is domain-root-relative URLs.
This script lets you deploy anywhere, without broken fonts or images.

---

If this saved you time, star the repo and share!