CSS file paths aren't rebased corretly anymore after updating to Vite 5

mcamprecios commented 3 months ago

Describe the bug

Hi and massive thanks for your work on Vite. My issue:

I have just updated from Vite 4 to 5.

Previously this configuration was working just fine;

export default defineConfig({
  publicDir: 'src/static',
  build: {
    assetsDir: 'assets',
    emptyOutDir: true,
    manifest: true,
    outDir: `public/themes/${process.env.WP_DEFAULT_THEME}/build/`,
    rollupOptions: {
      input: [
        'src/styles/styles.scss',
        'src/scripts/scripts.js',
      ],
    },
  },
});

But now, the build process doesn't adapt the paths in the CSS files correctly. Apparently it just takes the assetsDir option, without including the outDir, resulting in:

GET http://wp-starter.test/assets/Inter-Regular-CKDp9E3C.woff2

Instead of

GET http://wp-starter.test/public/themes/wp-starter/assets/Inter-Regular-CKDp9E3C.woff2

Any ideas of what is going on? I couldn't find much more information, and ChatGPT just suggests to install PostCSS to handle this, which I would love to avoid...

Thanks!

Reproduction

https://gitlab.com/mcamprecios/wp-starter

Steps to reproduce

Install NPM and composer dependancies, and build the repo with npm run build. Will need to install Wordpress to create a public page though...

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 15.94 GB / 31.86 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.81)
    Internet Explorer: 11.0.19041.4355

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

mcamprecios commented 3 months ago

As extra information, different tests causing problems with paths referenced in CSS files are relative to the .SCSS file:

Relative dev paths using fonts as static assets doesn't work:

SCSS in src/styles and fonts in src/static/fonts
SCSS src: url('../static/fonts/Inter-Black.woff2') format('woff2'); is transformed to http://wp-starter.test/assets/Inter-Regular-CKDp9E3C.woff2 instead of http://wp-starter.test/themes/wp-starter/assets/Inter-Regular-CKDp9E3C.woff2

Relative dev paths using fonts as non-static assets doesn't work:

SCSS in src/styles and fonts in src/fonts
SCSS src: url('../fonts/Inter-Black.woff2') format('woff2'); is transformed to http://wp-starter.test/assets/Inter-Regular-CKDp9E3C.woff2 instead of http://wp-starter.test/themes/wp-starter/assets/Inter-Regular-CKDp9E3C.woff2

While using the relative final path that the CSS should output works, which makes sense:

SCSS in src/styles and fonts in src/static/fonts
SCSS src: url('../fonts/Inter-Black.woff2') format('woff2'); just outputs ../fonts/Inter-Regular.woff2 referenced in D:\Repos\wp-starter\src\styles\styles.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime, and works on production.

mcamprecios commented 3 months ago

I'm sorry, after further digging I realised there are other facing a similar issue for some time now: https://github.com/vitejs/vite/issues/11012

sapphi-red commented 3 months ago

I guess you need to set base: 'public/themes/wp-starter/', in the config.

  import dotenv from 'dotenv';
  import { defineConfig } from 'vite';

  dotenv.config();

  export default defineConfig({
+   base: 'public/themes/wp-starter/',
    publicDir: 'src/static',

mcamprecios commented 2 months ago

That worked, thanks a lot.

Although I'm probably not fully understanding it, I'm curious why I didn't need to use the base parameter before updating the repo. Any ideas? Seems like something that has been around for a while now.

Thanks again.

sapphi-red commented 2 months ago

I guess the base was needed to be set from the beginning, but that didn't happen to be a problem until v5.

mcamprecios commented 2 months ago

Thanks a lot then @sapphi-red and sorry for the time!

vitejs / vite