Description
Describe the bug
My demo is based on vite ssr-vue example.
And I just imported a Vant Button in Home.vue , and added a custom className to it for rewriting it's style.
Run in dev mode (yarn dev), my custom css worked normally and intuitively. But in prod mode (yarn serve), the default css of the Vant Button was bundled in index.css, and my custom css was bundled in Home.css as the <!--preload-links--> which was injected before the index.css:
dist/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<!--preload-links-->
<script type="module" crossorigin src="/test/assets/index.dbf829e0.js"></script>
<link rel="stylesheet" href="/test/assets/index.0d210da7.css">
</head>
<body>
<div id="app"><!--app-html--></div>
</body>
</html>Because their selectors' weights are consistent, the original style of the component takes effect.
So in order to solve this problem, should I put the preload links behind the style generated by the build instead of before it?
Before:
// prerender.js
const html = template
.replace(`<!--preload-links-->`, preloadLinks)
.replace(`<!--app-html-->`, appHtml)After?:
// prerender.js
const html = template
.replace(`</head>`, `${preloadLinks}</head>`)
.replace(`<!--app-html-->`, appHtml)Will this destroy the performance improvement brought by preloading？
Or extract the CSS file from the preload links separately and put it in front of the end of head tag?
Wish for a recommended way. Thanks!!
Reproduction
https://github.com/LyzSg/vite-vue-ssr-demo
System Info
System:
OS: macOS 12.2.1
CPU: (10) arm64 Apple M1 Pro
Memory: 152.97 MB / 32.00 GB
Shell: 4.2.46 - /bin/bash
Binaries:
Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
Yarn: 1.22.18 - /usr/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
npmPackages:
@vitejs/plugin-vue: workspace:* => 3.0.0
@vitejs/plugin-vue-jsx: workspace:* => 2.0.0
vite: ^3.0.0 => 3.0.0Used Package Manager
yarn
Logs
No response
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- 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.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.