create-react-app 项目使用css-module及问题整理
使用 create-react-app 创建的 React TypeScript 项目，如何以 Module 的形式引入 css 呢？
正常情况可以这样引入：
代码语言：javascript复制import './index.scss';但是像下面这样：
代码语言：javascript复制import styles from './index.scss';就会报错：
代码语言：javascript复制TS2307: Cannot find module './index.scss' or its corresponding type declarations.意思差不多是找不到该模块。
理论上 React 默认是支持 sass / scss 的啊，也没错，因为第一种方式是可行的，只不过不支持以模块的形式引入。
解决方法有三种：
- 使用 require 引入： const styles = require('./index.scss')
- 添加全局声明
create-react-app 创建的 React 项目在
/src目录有一个react-app-env.d.ts文件，添加如下代码： declare module '*.module.css' { const classes: { readonly key: string: string } export default classes } declare module '*.module.sass' { const classes: { readonly key: string: string } export default classes } declare module '*.module.scss' { const classes: { readonly key: string: string } export default classes } 这样就支持*.css、*.sass、*.scss格式文件以模块形式引入了。 import styles from './index.module.scss'; 注意这里需要带.module，不然会不生效。 - 为了提高代码的可读性，可以把处理 css 的部分单独拆出来。
在根目录新建一个
type-scss.d.ts文件，将上面的代码复制进去，然后在tsconfig.json中include。 ///tsconfig.json{ // ... "include": "src", "type-scss.d.ts" // 配置的 css.d.ts文件 } - 使用 TypeScript 无非就是因为它的代码约束和提示能力，所以比较推荐的一个方法，是为 index.scss 生成 index.scss.d.ts 。
借助插件 typed-css-modules ，通过命令行生成 d.ts ，支持 watch 模式。
安装插件：
npm install -g typed-css-modules
执行命令：
tcm src
会生成 .d.ts 文件：
- src/ | myStyle.css | myStyle.css.d.ts created
它还支持一些参数：
-o或者--outDir指定文件夹 tcm -o dist src (your project root) - src/ | myStyle.css - dist/ | myStyle.css.d.ts created-w或者--watch，监视项目输入目录中的文件，修改后会自动编译。-c或者--camelCase，自动将some-component转换成驼峰发形式SomeComponent： .SomeComponent { height: 10px; } 一般使用以下命令就可以： tcm src -w -c
未经允许不得转载：w3h5 » create-react-app创建的项目使用css-module问题整理
