css modules本身不会因按需加载产生样式冲突，真正问题在于作用域边界被主动打破：如误用:global、同名类语义复用、第三方全局样式干扰、配置未启用modules模式或硬编码类名。
直接说结论：CSS Modules 本身不会因按需加载而产生样式冲突，真正出问题的往往是 import 方式、类名复用、或第三方全局样式干扰 —— 修复重点不在“加载时机”，而在“作用域边界是否被主动打破”。
为什么按需加载时 .module.css 还会冲突
CSS Modules 的类名哈希是编译时生成的，每个 .module.css 文件独立作用域，按需加载（比如 React.lazy 或 defineAsyncComponent）本身不影响局部性。但以下情况会让局部性失效：
- 手动用了
:global(.xxx)或:deep(.xxx)，把本该隔离的样式又打回全局 - 多个模块都写了同名类（如都用
.btn），虽然哈希后实际类名不同，但开发者在 JS 中误写成styles.btn+styles.btn，逻辑上仍算“复用同一语义”，一旦某处改了.btn定义，另一处视觉就变 - 第三方 UI 库（如 Ant Design）的 CSS 是全局注入的，它不走 Modules 流程，会直接匹配你组件里渲染出的原始类名（比如
ant-btn），哪怕你用的是Button.module.css - Webpack 或 Vite 配置中漏掉了
modules: true，导致某些.module.css实际没启用 Modules 模式（常见于混用 Sass/Less 时 loader 配置错位）
import styles from './X.module.css' 后怎么安全用类名
必须通过对象属性访问，不能拼字符串或硬编码。这是保证哈希类名被正确解析的唯一方式：
// ✅ 正确：走编译时映射
import styles from './Button.module.css';
return <button classname="{styles.primary}">Click</button>;
// ❌ 错误：绕过 Modules，等于写全局 class
return <button classname="primary">Click</button>;
// ❌ 危险：动态拼接破坏类型安全，且 IDE 不提示
const cls = 'primary';
return <button classname="{styles[cls]}">Click</button>;
如果你需要条件组合多个类，用数组 + clsx 或模板字面量：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章