0%

react+ts踩坑记1:使用LESS写样式,自动生成类型声明

简介

本篇文章主要介绍如何在react+ts项目中使用lessless-module是如何自动为样式生成对应的d.ts文件,以方便使用ts开发。

增加less支持

关于如何在react项目中使用less,网上有很多相关文章,我也写过相关的介绍,这个系列文章主要提供问题解决思路和方案,因此不再赘述。

样式的写法

配置好 lessless-module 后,样式的写法会有略微改变,就像这样:

1
2
3
4
5
6
7
8
9
10
import styles from './index.module.less'
const Component: React.FC<Props> = ({...props}) => {
return (
<div className={styles.main}>
<div className={styles.box}>
{/* ... */}
</div>
</div>
)
}

样式生成类型声明

如果只是按照上面的方法写,ts会报错,说找不到导入的模块,而且styles没有main和box属性,解决这个问题的方案非常简单,自己声明一个类型即可:

1
2
3
4
5
6
// 如果是cra生成的项目,则在react-app-env.d.ts中添加
// 为模块声明类型
declare module '*.module.less' {
const classes: { readonly [key: string]: string }
export default classes
}

既然用了typescript,就要充分利用类型检查,如果在输入className的时候能够自动提示styles的属性就好了。我们可以使用 @teamsupercell/typings-for-css-modules-loader 来自动生成样式文件对应的 d.ts 文件:

首先安装依赖:

1
$ npm i -D @teamsupercell/typings-for-css-modules-loader

增加webpack loader:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 这个loader需要加在css-loader之前,
{
loader: require.resolve('@teamsupercell/typings-for-css-modules-loader'),
options: {
banner: "// autogenerated by typings-for-css-modules-loader. \n// Please do not change this file!"
}
}
// 如果webpack打包特别慢,可以增加这个配置
plugins: [
new webpack.WatchIgnorePlugin([
/css\.d\.ts$/,
/less\.d\.ts$/,
]),
// ...
]

配置好后,如果书写一段这样的样式:

1
2
3
4
5
6
7
8
9
10
// index.module.less
.some-class {
// some styles
&.someOtherClass {
// some other styles
}
&-sayWhat {
// 这里不写任何样式
}
}

在组件中导入并使用这个样式,就会自动生成文件,在tsx中书写样式时,就会有代码提示了,我们还可以发现,插件并没有为&-sayWhat生成类型:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// index.module.less.d.ts
// autogenerated by typings-for-css-modules-loader.
// Please do not change this file!
declare namespace IndexModuleLessNamespace {
export interface IIndexModuleLess {
someClass: string;
'some-class': string;
someOtherClass: string;
}
}

declare const IndexModuleLessModule: IndexModuleLessNamespace.IIndexModuleLess & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: IndexModuleLessNamespace.IIndexModuleLess
}

export = IndexModuleLessModule

Tips:

要先写好less,在组件中导入less并应用一次样式,保存后才会生成 d.ts 文件,因为webpack不会处理没有使用的文件

如果less中只写了类名而没有写具体的样式,d.ts文件不会生成对应的属性,因为空的样式类名在css压缩时被移除了

天真小兮兮 wechat
扫描二维码关注我的订阅号“前端小海螺”