CSS Modules 是主流稳妥的模块化方案，构建时哈希隔离类名、零运行时开销；Webpack 需 css-loader 开启 modules: { mode: 'local' } 且文件名含 .module.css，Vite 原生支持；@import 已弃用，因其阻塞加载、无法参与构建、无作用域；常见错误包括后缀缺失、混用 scoped 与 Modules、动态拼接类名不当；它仅解决作用域隔离，不处理复用、主题、响应式等，需搭配 Sass/CSS 变量等补充。
CSS Modules 是当前最主流、最稳妥的模块化引入方式，尤其在 React/Vue 项目中几乎成为标配。 它不依赖运行时库，构建时完成类名哈希隔离，零额外体积、无运行时开销，且与框架生态无缝衔接。其他方案（如 CSS-in-JS 或 BEM）各有适用场景，但若你只想选一种“开箱即用、团队易对齐、长期维护成本低”的方式，Button.module.css + import styles from './Button.module.css' 就是答案。
怎么启用 CSS Modules（Webpack / Vite 场景）
不用手写 loader 配置——现代构建工具已高度封装：
- Webpack：只需在
css-loader中开启modules: true（推荐用modules: { mode: 'local' }），配合style-loader（开发）或MiniCssExtractPlugin（生产）；文件名必须含.module.css后缀才触发模块化 - Vite：原生支持，无需配置。只要文件名是
xxx.module.css，import styles from './xxx.module.css'就自动启用；普通.css则走全局注入 - 注意：CSS Modules 的类名映射只存在于 JS 模块内，
styles.button是合法的，但直接在 HTML 模板里写class="button"不会生效
为什么不用 @import？它看起来更“纯 CSS”
@import 是 CSS 原生语法，但**在模块化工程中它早已被弃用**，原因很实际：
- 加载阻塞：浏览器串行解析
@import，每个都可能触发新请求，拖慢首屏渲染 - 无法参与构建流程：Webpack/Vite 无法识别
@import中的路径依赖，导致 HMR 失效、Tree Shaking 失效、样式重复打包 - 作用域为零：导入的样式仍是全局污染，完全违背模块化目标
- 替代方案明确：预处理器用
@use（Sass）或@forward，JS 端统一用import—— 更可控、可调试、可拆分
常见错误：样式没生效 or 类名还是原始字符串
这不是 bug，而是配置/命名没对上：
NetShop网店系统
下载
NetShop软件特点介绍： 1、使用ASP.Net(c#)2.0、多层结构开发 2、前台设计不采用任何.NET内置控件读取数据，完全标签化模板处理，加快读取速度3、安全的数据添加删除读取操作，利用存储过程模式彻底防制SQL注入式攻击4、前台架构DIV+CSS兼容IE6,IE7,FF等，有利于搜索引挚收录5、后台内置强大的功能，整合多家网店系统的功能，加以优化。6、支持三种类型的数据库：Acces
立即学习“前端免费学习笔记（深入）”；
- 文件名没带
.module.css后缀 → 构建工具当普通 CSS 处理，导出的是空对象或默认{} - 在 Vue 单文件组件中误用：
和 CSS Modules 是两套机制，混用会导致类名双重哈希或丢失绑定 - 动态拼接类名写成：
className="btn " + styles.primary→ 这样会把哈希后的类名当字符串拼进去，但引号外的btn仍是全局类，且未被模块化处理；正确写法是className={styles.primary}或组合className={`${styles.btn} ${styles.primary}`} - SSR 场景下样式丢失：服务端不执行 JS，
style-loader插入的标签不会出现；需用框架配套方案（如 Next.js 的styled-jsx或手动collectStyles）
/* Button.module.css */
.button {
padding: 8px 16px;
border: none;
cursor: pointer;
}
.primary {
background: #007bff;
color: white;
}
真正容易被忽略的点是：CSS Modules 的“模块化”只发生在构建时的类名映射和作用域隔离，它**不解决样式复用、主题变量、响应式逻辑抽象等问题**。这些仍需靠 Sass 变量、CSS 自定义属性（--primary-color）、或搭配 PostCSS 插件来补足。别指望一个 .module.css 文件包打天下——它只是模块化的起点，不是终点。
