Styling discrepancies between dev and build

[dasdawidt]

Describe the bug

Just like the Vite docs, I use custom styles in the index.md file using <style module>. I also use custom components in which I use <style scoped>.

Since I updated from version 1.0.0 to the latest one (the one in the StackBlitz), the built page's styles are broken. In the dev preview everything looks like expected.

Reproduction

Open the StackBlitz Demo with this link.

If it does not run automatically, run npm install && npm run dev. It should look something like this:

Then run npm run docs:build && npm run docs:preview and it will look like this:

As you can see, the hero image and its background are different and the cards are different as well.

Expected behavior

I expected the built version to look just like the dev preview (or at least very close).

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 6.45 GB / 15.35 GB
  Binaries:
    Node: 21.2.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.2 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    vitepress: ^1.3.1 => 1.3.1

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Not sure but it's happening on vitepress 1.0.0 too, at least on stackblitz.

[brc-dd]

Most likely caused by this - vitejs/vite#16588 (the order is wrong now - https://www.diffchecker.com/0EPXuHIs/)

Working fine till vite 5.3.0-beta.1

Please use npm/pnpm overrides till this is resolved.

[chenleicode]

same problem, and pages built using GitHub Actions is normal.
how to resolve it? upgrade vite?

[dasdawidt]

same problem, and pages built using GitHub Actions is normal. how to resolve it? upgrade vite?

As @brc-dd mentioned, it is working fine till vite 5.3.0-beta.1, so you have to downgrade vite to that version by specifying an override in the package.json like this (for npm):

"overrides": {
  "vitepress": {
      "vite": "5.3.0-beta.1"
  }
},

Or like this (for pnpm):

"pnpm": {
  "overrides": {
      "vite": "5.3.0-beta.1"
  }
}

[chenleicode]

I will try, thank you

same problem, and pages built using GitHub Actions is normal. how to resolve it? upgrade vite?

As @brc-dd mentioned, it is working fine till vite 5.3.0-beta.1, so you have to downgrade vite to that version by specifying an override in the package.json like this (for npm):

"overrides": {
  "vitepress": {
      "vite": "5.3.0-beta.1"
  }
},

Or like this (for pnpm):

"pnpm": {
  "overrides": {
      "vite": "5.3.0-beta.1"
  }
}

[ZackBz]

I will try, thank you

same problem, and pages built using GitHub Actions is normal. how to resolve it? upgrade vite?

As @brc-dd mentioned, it is working fine till vite 5.3.0-beta.1, so you have to downgrade vite to that version by specifying an override in the package.json like this (for npm):

"overrides": {
  "vitepress": {
      "vite": "5.3.0-beta.1"
  }
},

Or like this (for pnpm):

"pnpm": {
  "overrides": {
      "vite": "5.3.0-beta.1"
  }
}

Did this work for you? I am seeing this issue between dev preview and build preview and pinning vite to 5.3.0-beta.1 didn't work for me. I am using the latest version of vitepress 1.3.2.

I have this in my package.json. I am using Bun

"overrides": {
    "vite": "5.3.0-beta.1"
  }

[dasdawidt]

@ZackBz according to the bun docs, your solution should work. The one I proposed specifying that the override is for vitepress does not, as bun currently does not support nested overrides. In my case, the pnpm solution worked, maybe try it using npm or pnpm.

[chenleicode]

@ZackBz , it worked, but i am using npm