直接用 import './button.css' 能生效但不推荐，因其默认为全局样式，易导致污染；正确做法是使用 css modules：文件名必须为 .module.css，导入需写 import styles from './x.module.css'，且 classname 必须通过 styles.xxx 访问。
直接用 import './Button.css' 就能生效，但是否“正确”取决于你想要全局样式还是局部隔离——没配 CSS Modules 时它就是全局的，多人协作或组件复用时容易踩坑。
为什么 import './Button.css' 有时没效果？
常见现象是写了样式、也 import 了，但元素上没渲染出对应 class。根本原因不是语法错，而是构建链路断了：
- Webpack/Vite 没配
css-loader+style-loader（Create React App 默认已配好，自建项目需手动检查） - 路径写错，比如
import './button.css'但文件实际叫Button.css（Linux/macOS 下大小写敏感） - CSS 文件里用了
@import或url()，但 loader 没启用resolve-url-loader或相关插件 - 文件被 ESLint 或 TS 检查误标为“未使用”，删掉了 import 行（尤其在 VS Code 中自动清理时）
如何让 .module.css 真正生效？
名字、导入方式、用法三者必须同时满足，缺一不可，否则就退化成普通 CSS：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 文件名必须含
.module.css（如Button.module.css，不是Button.modules.css或Button.css） - 导入必须写成
import styles from './Button.module.css'（不能是import './Button.module.css'） - 类名必须通过
styles.xxx访问（className={styles.button}），不能写死className="button" - TS 项目需加类型声明：在
src/react-app-env.d.ts里补充declare module '*.module.css' { const classes: { [key: string]: string }; export default classes; }
全局 CSS 和模块 CSS 能混用吗？
能，而且推荐这样分工——但必须理解它们不在同一作用域：
-
import './base.css'：只放重置、CSS 变量、工具类（如.sr-only），它本就该全局生效 -
import styles from './Button.module.css'：只管组件内部结构，生成的类名类似Button_button__abc123，天然不冲突 - 禁止在
.module.css里@import './base.css'——这会破坏模块边界，构建工具通常直接忽略或报错 - 如果 base.css 里定义了
.btn，而 Button.module.css 里也有.btn，二者完全无关，不会互相覆盖
最常被忽略的点是：CSS Modules 不报错，styles.xxx 返回 undefined 时 DOM 上就空着 class，DevTools 里看不到任何提示，只能靠人工核对文件名、导入语句、类名拼写三处是否一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
