简介
本篇文章主要介绍如何在react+ts项目中使用less
,less-module
是如何自动为样式生成对应的d.ts
文件,以方便使用ts开发。
增加less支持
关于如何在react项目中使用less,网上有很多相关文章,我也写过相关的介绍,这个系列文章主要提供问题解决思路和方案,因此不再赘述。
样式的写法
配置好 less
和 less-module
后,样式的写法会有略微改变,就像这样:
1 | import styles from './index.module.less' |
样式生成类型声明
如果只是按照上面的方法写,ts会报错,说找不到导入的模块,而且styles没有main和box属性,解决这个问题的方案非常简单,自己声明一个类型即可:
1 | // 如果是cra生成的项目,则在react-app-env.d.ts中添加 |
既然用了typescript,就要充分利用类型检查,如果在输入className的时候能够自动提示styles的属性就好了。我们可以使用 @teamsupercell/typings-for-css-modules-loader
来自动生成样式文件对应的 d.ts
文件:
首先安装依赖:
1 | npm i -D @teamsupercell/typings-for-css-modules-loader |
增加webpack loader:
1 | // 这个loader需要加在css-loader之前, |
配置好后,如果书写一段这样的样式:
1 | // index.module.less |
在组件中导入并使用这个样式,就会自动生成文件,在tsx中书写样式时,就会有代码提示了,我们还可以发现,插件并没有为&-sayWhat
生成类型:
1 | // index.module.less.d.ts |
Tips:
要先写好less,在组件中导入less并应用一次样式,保存后才会生成 d.ts 文件,因为webpack不会处理没有使用的文件
如果less中只写了类名而没有写具体的样式,d.ts文件不会生成对应的属性,因为空的样式类名在css压缩时被移除了