html无法原生支持css modules，必须依赖构建工具（如vite/webpack）和js模块导入流程，通过import styles from './x.module.css'并在jsx/vue中动态注入类名才能启用。
HTML里不能直接用 CSS Module
CSS Module 不是 HTML 原生能力，<link rel="stylesheet"> 引入的普通 CSS 文件完全不支持模块化。你在 HTML 中写 class="button"，浏览器就真按字面匹配全局 .button，不会加哈希、不隔离、不校验——所有 CSS Module 的机制在纯 HTML 环境下根本不存在。
常见错误现象：import styles from './Button.module.css' 这行代码在 HTML 里直接报错，因为没 JS 模块系统；或者你硬塞进 <script type="module"></script>，但依然无法让 styles 对象注入到 DOM 类名中——构建工具（如 Vite/Webpack）才是关键环节。
- 必须有打包工具参与：Vite 默认识别
.module.css后缀，Webpack 需配css-loader?modules=true - 必须走 JS 模块导入流程：
import styles from './X.module.css'是唯一合法入口，不是@import，也不是<link> - 最终类名是运行时注入的：
className={styles.button}渲染成类似class="button__abc123"，这个过程发生在 JS 执行阶段，HTML 静态文件里不可能生成
React/Vue 等框架中怎么真正启用 CSS Module
所谓「在 HTML 中使用」，实际是指在基于 HTML 构建的前端框架组件里启用 CSS Module。核心动作只有两个：文件命名 + 正确导入。
文件命名必须带 .module 后缀（如 Button.module.css 或 Header.module.less），否则构建工具当普通 CSS 处理，类名零改动。
- Vite 下无需额外配置，
.module.css/.module.less自动启用模块化 - Webpack 要确保
css-loader开启modules: true，且importLoaders设置合理 - 导入只能用默认导入：
import styles from './X.module.css'，不能用import * as styles或import { button } from—— 模块导出是对象，不是命名导出 - JSX/Vue template 中必须通过
{styles.xxx}插值，写死className="xxx"就等于放弃模块化
为什么检查元素发现类名没变？
渲染后 DOM 里还是 class="button"，说明 CSS Module 根本没生效。这不是缓存问题，而是构建链路断了。
最常踩的坑：
- 文件名写成
Button.css而非Button.module.css（Vite 下失效） - 用
require('./Button.module.css')替代import，CommonJS 模式下不触发模块化逻辑 - 样式文件里用了
@import './reset.css'——@import会破坏作用域，模块文件里只允许:global(...)显式穿透 - 开发服务器没重启，改了配置但热更新没拉取新规则
验证方式：打开浏览器开发者工具，看元素上的 class 属性是否含双下划线和哈希（如 button__k2j3n），没有就说明还在走全局流程。
想在纯 HTML 页面里模拟局部样式怎么办？
如果真没法上构建工具或框架，又想避免冲突，只能退回到手动隔离策略：
- 用唯一 ID 包裹整块内容：
<div id="my-widget-123">...</div>，然后所有 CSS 加前缀：#my-widget-123 .btn - 改用 BEM 命名：不用
.button，而用.my-widget__button，靠人工约定规避冲突 - 禁用嵌套选择器：避免
.modal .btn，改用独立类名.btn--in-modal，降低对结构依赖 - 慎用
!important：它能压住宿主样式，但会让后续维护变成噩梦
这些方法都不如 CSS Module 自动可靠，但至少能在无构建环境时守住底线——重点是别幻想“在 HTML 里开个开关就能模块化”，那不是缺失配置，而是概念错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
