Search code examples
rollupvite

Vite build gets path inside css file wrong if i set base to './'

i've set up a plain vanilla js Vite installation and changed the folder structure to include all my "working" files inside a "src" folder. With the following rollup Option inside my vite.config.js file, the build process mimic my folder structure inside the dist folder as well.

rollupOptions: {
  output: {
    assetFileNames: (assetInfo) => {
      let extType = assetInfo.name.split('.')[1];
      if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
        extType = 'img';
      }
      if (/woff|woff2|ttf/i.test(extType)) {
        extType = 'fonts';
      }
      return `assets/${extType}/[name]-[hash][extname]`;
    },
    chunkFileNames: 'assets/js/[name]-[hash].js',
    entryFileNames: 'assets/js/[name]-[hash].js',
  },
},

Build process works as intended: all files are inside their specified folders and all links inside html & css files are rewritten correctly.

But as soon as i set 'base' to './' or '' inside my vite.config.js file and build the project the url links inside css files are corrupted. They are missing the path. Only base + filename are written. All urls inside html files are build correctly.

If i set the base to something like '/somename/' all urls (html&css) are build correctly.

How can i fix this? :)

Here is a stackblitz example, where the body background image shows this behaviour. https://stackblitz.com/edit/vitejs-vite-j6xd8y?file=dist/assets/css/index-1e183c12.css

Solution

  • This seems to be a bug in Vite 2 (as of 2.9.12). I recommend reporting the issue.

    As a workaround, switch to Vite 3 (currently 3.0.0-beta.2), which has refactored the base configuration code and avoids the problem you observed:

    npm i -D vite@beta

    demo