css全局生效因无作用域，import仅触发加载注入head；路由隔离需useeffect动态增删link并加data-route标识；构建阶段须禁用css合并，优先用css modules避免样式冲突。
为什么 import 一个 CSS 文件会全局生效
因为 CSS 本身没有作用域，import './Home.css' 在 js 模块里执行，只是触发了样式表加载和注入，浏览器把它加到 里，自然影响全站。这不是 webpack 或 Vite 的 bug，是 CSS 天然行为。
- 哪怕你只在
Home.tsx里 import，只要这个模块被加载，样式就进 dom 了 - 服务端渲染（SSR）时更明显：CSS 提前注入，可能污染其他路由的首屏样式
- Tree-shaking 对 CSS 无效——删掉 JS 引用，CSS 文件仍可能被打包进去（取决于打包器配置）
怎么让 CSS 真正按路由隔离（非 scoped）
核心思路不是“阻止加载”，而是“控制注入时机 + 清理时机”。适用于 React router、Vue Router 等客户端路由场景。
- 用
useEffect在组件挂载时动态插入<link rel="stylesheet">标签，卸载时移除对应<link> - 避免用
import，改用const link = document.createElement('link')手动管理 - 给每个 link 加唯一
data-route属性，方便卸载时精准匹配，比如data-route="home" - Vite 用户注意：
import.meta.env.BASE_URL要参与拼接路径，否则生产环境 404
示例（React）：
useEffect(() => { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '/css/home.css'; // 或用 new URL('./home.css', import.meta.url).href link.dataset.route = 'home'; document.head.appendChild(link); return () => document.head.removeChild(link); }, []);Webpack/Vite 打包时 CSS 不拆分？检查这三个配置点
即使运行时做了隔离，如果构建阶段把所有 CSS 合并进一个 main.css，那初始加载还是全量。得让打包器“别合并”。
立即学习“前端免费学习笔记（深入）”；
- Webpack：确认
optimization.splitChunks.cacheGroups.styles没有把所有 CSS 归到同一 chunk；建议关掉自动提取，改用mini-css-extract-plugin+ 动态 import - Vite：默认不提取 CSS，但若用了
build.rollupOptions.output.manualChunks，别把.css文件名写死进规则 - 关键陷阱：
import('./Home.module.css')是有效的，但import('./Home.css')在某些配置下仍会被收集进style.css—— 因为没启用 CSS Modules，打包器不识别其模块边界
真正要小心的不是加载，是样式优先级和重复注入
多个路由组件都动态插入同名 class（比如 .button），又没加 BEM 或 CSS Modules，结果就是样式打架。更隐蔽的问题是：用户快速跳转，组件频繁挂载/卸载，<link> 可能漏删，导致内存里堆了一堆已失效的样式表引用。
- 每次插入前先查
document.head.querySelector('link[data-route="xxx"]')，存在就跳过，避免重复 - 不要依赖类名前缀，老老实实用 CSS Modules 或
styled-components的哈希类名 - 服务端渲染必须同步输出对应 CSS —— 客户端动态加载的 CSS，在 SSR 首屏不会生效，造成 FOUC 或样式缺失
最麻烦的其实是缓存：CSS 文件内容变了但文件名没变，浏览器可能还用旧版。所以动态加载路径里最好带 hash，比如 /css/home.a1b2c3.css。