create-react-app创建的项目使用css-module问题整理

create-react-app 项目使用css-module及问题整理

使用 create-react-app 创建的 React TypeScript 项目，如何以 Module 的形式引入 css 呢？

正常情况可以这样引入：

import './index.scss';

但是像下面这样：

import styles from './index.scss';

就会报错：

TS2307: Cannot find module './index.scss' or its corresponding type declarations.

意思差不多是找不到该模块。

理论上 React 默认是支持 sass / scss 的啊，也没错，因为第一种方式是可行的，只不过不支持以模块的形式引入。

解决方法有三种：

1. 使用 require 引入： const styles = require('./index.scss')
2. 添加全局声明 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 ，不然会不生效。
3. 为了提高代码的可读性，可以把处理 css 的部分单独拆出来。 在根目录新建一个 type-scss.d.ts 文件，将上面的代码复制进去，然后在 tsconfig.json 中 include 。 /// tsconfig.json {   // ...   "include":      "src",     "type-scss.d.ts" // 配置的 css.d.ts文件    }
4. 使用 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问题整理