typescript 报“cannot find module”是因为 css 文件缺少类型声明，需用 typings-for-css-modules-loader 自动生成 .d.ts 文件并确保 namedexport 与导入方式匹配。
直接用 import 引入 .css 或 .scss 文件时 TypeScript 报错 “Cannot find module”，不是你写错了，是它真不认识——CSS 文件默认没有类型定义，必须显式告诉 TypeScript 这些文件导出什么。
为什么 import styles from './Button.css' 会报错
TypeScript 只认 .ts/.tsx 和已声明的模块（比如 @types/react）。当你写 import styles from './Button.css'，TS 会去查有没有 Button.css 对应的类型声明，但默认没有，所以报错。Webpack 能处理它，但 TS 编译器不参与构建流程，只做类型检查。
- 错误现象：
Cannot find module './Button.css'或Module '"./Button.css"' has no exported member - 根本原因：缺少
.d.ts类型声明，或声明方式与导入方式不匹配（比如用了export default却用import * as） - 单纯加
declare module '*.css'能过编译，但失去类名提示和拼写校验——这违背了用 TS 的初衷
typings-for-css-modules-loader 是怎么工作的
它不是替代 css-loader，而是和它协同：在 Webpack 编译 CSS 的同时，扫描类名并自动生成 .d.ts 文件。比如 Button.css 里有 .primary 和 .disabled，它就生成 Button.css.d.ts，内容为 export const primary: string; export const disabled: string;。
- 必须配合
css-loader使用（modules: true开启模块化） -
namedExport: true才能支持import * as styles；若用import styles from，得关掉namedExport并确保export default存在 - 生成的
.d.ts文件默认放在同目录下，VS Code 会自动识别，无需手动/// <reference></reference> - 注意 loader 执行顺序：
typings-for-css-modules-loader必须在css-loader之前（因为它要读取 css-loader 解析后的 class 结构）
Webpack 配置关键点与常见坑
以下配置适用于 .css 和 .module.css（推荐统一用 .module.css 后缀，语义明确且避免和全局 CSS 混淆）：
module: {
rules: [
{
test: /\.module\.css$/i,
use: [
'style-loader',
{
loader: '@teamsupercell/typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true,
camelCase: true,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
},
{
loader: 'css-loader',
options: { modules: true }
}
]
}
]
}
- 不要漏掉
@teamsupercell/前缀——新版本已迁移到该组织，typings-for-css-modules-loader包名已废弃 -
camelCase: true把.my-button转成myButton，避免访问时写styles['my-button'] - 如果项目用 Sass，把
test改成/\.module\.(scss|sass)$/i，并在use末尾加'sass-loader' - 生成的
.d.ts文件会被 Git 跟踪——建议加到.gitignore，否则每次改样式都触发大量 .d.ts 提交
TS 文件中怎么写才真正获得提示
生成的类型声明决定了你该怎么导入。以 Button.module.css 为例，若配置了 namedExport: true，对应 Button.module.css.d.ts 内容是 export const primary: string;，那你就必须用：
import * as styles from './Button.module.css';
// ✅ VS Code 会提示 primary / disabled 等成员
<button classname="{styles.primary}">OK</button>
- 不能写
import styles from './Button.module.css'—— 这种写法要求export default，而namedExport: true会禁用它 - 如果坚持用
import styles from，需设namedExport: false，此时生成的.d.ts是declare const _default: { primary: string }; export default _default; - 编辑器重启或重载 TS 服务（Ctrl+Shift+P → “TypeScript: Restart TS server”）有时是必须的，尤其首次生成 .d.ts 后
最易被忽略的是 loader 执行顺序和 namedExport 与导入语法的严格对应——配错一个，TS 就“假装看不见”那些类名，但又不报错，只默默失去提示。动手前先确认 .d.ts 文件是否真的生成、内容是否符合预期，比调半天 webpack 配置更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
