必须将公共CSS抽成独立文件并在各页面入口JS中import，而非用或@import引入，否则Rollup无法识别依赖、无法合并，导致重复打包、缓存失效、样式隔离失控；需配合manualChunks配置统一提取，且shared.css仅含跨页面必需的布局层规则。
必须把公共 CSS 抽成独立文件，并在每个页面入口 JS 中 import，而不是靠 @import 或 HTML 引入——否则 Rollup 不会合并，打包后重复输出。
为什么不能用 HTML 的
看似最直接，但实际会破坏构建时的依赖分析和 CSS 提取逻辑。Vite + Rollup 只对 JS 入口链路中的 import 语句做静态分析， 是运行时加载，无法参与 chunk 拆分与复用。结果是：每个页面都单独打包一份相同的 CSS，缓存失效、体积膨胀、样式隔离失控。
- 多个 HTML 文件都写
→ 构建后仍各自生成一份shared.xxx.css，不是同一份 - 若 shared.css 里用了 CSS 自定义属性（如
--color-primary），而各页面 JS 又动态改了:root，行为不可控 - 开发时热更新不触发重载，改了
shared.css得手动刷新所有页面
正确做法：在每个页面入口 JS 中 import 同一个 CSS 文件
让 Rollup 把它识别为模块依赖，统一提取进 manualChunks，最终只生成一个物理文件供所有页面引用。
- 目录结构示例：
src/styles/shared.css（仅含重置、变量、容器类等 layout 层规则） - 每个页面入口 JS（如
src/pages/home/main.js）开头加：import '@/styles/shared.css' - 配置
vite.config.js中的build.rollupOptions.output.manualChunks显式命名该块：manualChunks: { 'shared-css': ['src/styles/shared.css'] } - 确保
shared.css不含任何组件 scoped 样式（如.btn[data-v-xxx]），否则抽离后选择器失效
如何避免 shared.css 被业务样式污染
layout 层 CSS 不是“所有公共样式”的垃圾桶，它只负责跨页面一致的骨架规则。一旦混入业务语义，就失去复用价值，还容易引发覆盖冲突。
- 允许的内容：
body { margin: 0 }、:root { --color-bg: #fff }、.l-container、@media (min-width: 768px) - 禁止的内容：
.btn-primary（按钮样式随业务变）、.article-title（语义绑定单页）、div { font-size: 14px }（元素选择器太宽泛）、.header:hover（交互属于组件层） - 上线前可用
purgecss扫描验证：每个类是否真正在 ≥2 个页面中被使用 - 推荐加命名空间前缀（如
l-）和自定义属性代替硬编码值，方便业务层安全覆盖
常见错误：用原生 @import 嵌套 CSS 文件
比如在 shared.css 里写 @import 'reset.css'; @import 'vars.css';，这会导致浏览器串行请求、阻塞渲染、且无法并行下载。
- Chrome DevTools Network 面板过滤
css，看到shared.css → reset.css → vars.css链路 → 就是它在作祟 - 构建工具侧应改用
import（JS）或@use（Sass），由 Vite 统一解析合并 - 如果非要用原生
@import，必须放在文件最顶部，且只导入同域资源；跨域已被现代浏览器禁用
真正难的不是怎么写那行 import，而是判断哪些规则该放进 shared.css —— 它必须经得起“删掉后两个以上页面立刻崩掉”的检验。一旦发现某个样式只在一个页面生效，就得立刻移走。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
