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

   
   

未经允许不得转载：Web前端开发资源网 » create-react-app创建的项目使用css-module问题整理

推荐阅读：

Bootstrap滚动监听不用offset实现向下偏移

解决margin击穿的几种方法

Jetbrains系列激活补丁JetbrainsCrack-2.8更新

设置 letter-spacing 后文字不能居中的解决方法

js 获取input的value值及验证手机号和汉字的正则表达式