必须用 .module.scss 后缀才能启用 css modules，文件名是 webpack/cra 识别模块化的唯一依据；需 import styles from './x.module.scss' 并通过 classname={styles.xxx} 动态使用，硬写字符串类名会失效。
文件名必须带 .module.scss 后缀
Webpack 或 CRA 识别 CSS Modules 的唯一依据是文件扩展名，不是内容或 import 方式。写成 Button.scss 就是全局样式；写成 Button.module.scss 才触发模块化逻辑。
常见错误：改了 webpack 配置却仍没隔离，结果发现文件名漏了 .module —— 这个后缀是硬性开关，缺一不可。
-
import './Button.scss'→ 全局注入，类名不加哈希，可能污染其他组件 -
import styles from './Button.module.scss'→ 返回对象，styles.button是编译后唯一类名 - CRA v2+ 开箱即用，无需改配置；自建项目需确认
css-loader启用了modules: true
className 必须用对象属性写法，不能写字符串
CSS Modules 的类名在运行时才生成（如 button_abc123），所以不能硬编码字符串。直接写 className="button" 会失效，因为 DOM 上根本不存在这个原始类名。
正确写法只有一种：className={styles.button}。哪怕你只用一个类，也得通过对象取值。
- 错误：
<button classname="button"></button>→ 样式丢失，控制台无报错但无效 - 正确：
<button classname="{styles.button}"></button>→ 实际渲染为class="button_abc123" - 多类名组合：
className={`${styles.button} ${styles.primary}`}或用clsx库
TypeScript 项目要补 .d.ts 声明文件
TS 编译器不认识 .module.scss，不加声明会报 Cannot find module './X.module.scss'（ts2307）。这不是运行时问题，是类型检查阶段卡住。
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
在项目根目录或 src 下新建 declarations.d.ts，内容只需一行：
declare module '*.module.scss' {
const classes: { readonly [key: string]: string };
export default classes;
}
注意：Vite 默认支持，但 CRA 和 Webpack 项目必须手动加；如果用了 sass（Dart Sass）而非 node-sass，声明方式不变，不影响运行。
SCSS 语法可用，但模块化逻辑和预处理是两件事
SCSS 的嵌套、变量、@mixin 等功能照常生效，但它们不参与模块化——模块化只作用于最终生成的 CSS 类名（.btn → btn_xyz789），跟 SCSS 编译流程无关。
真正容易混淆的是：有人以为启用了 SCSS 就自动模块化，结果写了 import './A.scss' 还在 debug 类名冲突。记住：模块化由文件名和 loader 共同决定，不是由语法决定。
-
.module.scss文件里写.wrapper { &__header { ... } }→ 编译后仍是局部类名 -
.scss文件里写同样嵌套 → 类名全局暴露，可能被其他组件意外覆盖 - 第三方 UI 库（如 Ant Design）的
.css或.scss不要用.module后缀，否则类名哈希化会导致样式失效
className。这两处一错，整个模块化就形同虚设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
