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 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
import clsx from 'clsx';
// ...
className={clsx(styles.btn, props.disabled && styles.disabled)}
和第三方库共存时怎么避免被覆盖
Ant Design、Element Plus 等库的样式默认全局生效，它们的规则优先级往往高于你的 Modules 类名（尤其当用了 !important 或更长选择器）。应对策略不是“禁用它们的 CSS”，而是明确接管控制权：
- 用
:global()主动覆盖（仅限你需要定制的部分）：:global(.ant-btn) { border-radius: 6px; } - 用
:where()或属性选择器降低权重，避免被第三方高权规则压制：[data-comp="my-button"] .btn { background: #007bff; }然后在组件根元素加data-comp="my-button" - 在 Webpack/Vite 中配置
css.modules.auto为true（Vite）或确保css-loader的modules.auto匹配/\.module\./，防止第三方 CSS 被意外模块化（这反而会导致它无法生效）
Vue 项目里 lang="scss" scoped 和 CSS Modules 混用要注意什么
Vue 官方 <style scoped> 和 CSS Modules 是两套机制，不能混在同一个 <style> 标签里。如果项目已用 scoped，又想迁移到 CSS Modules：
- 先统一文件后缀：把
.vue里的<style scoped>拆出来，存为Component.module.scss - 在组件中改为
import styles from './Component.module.scss'，删掉<style>标签 - Vue CLI 或 Vite 默认支持
.module.scss，但要确认css-loader或vite-plugin-css-modules已启用 —— 否则styles对象为空 - 注意 Vue 的
scoped会自动加 data 属性选择器（如.foo[data-v-f3f2f1]），而 CSS Modules 不加，所以迁移后选择器权重下降，可能需要补!important或调整结构
最常被忽略的一点：CSS Modules 的哈希只作用于类名和 ID，不处理标签选择器（如 button）、属性选择器（如 [type="submit"]）或伪类（如 :hover）——这些仍按原样输出，若多个模块都写了 button:hover，就会真·冲突。
