在react中使用css module

刚开始使用react, 发现react的cssmodule不是很好用, 每次都需要

import style from './index.module.scss'
import cls from 'classnames'
...
<div className={style.xxx}></div>
...
<div className={`${style.xxx} ${style['xxx']}`}></div>
...
<div className={cls(style.xxx, style['xxx'])}></div>

这样引入, 感觉很麻烦.

像在.vue文件中直接在style标签加上scoped属性多简单.

遇到了一些问题

问题1

虽然引入了style, 但是没有智能提示.

解决办法

使用CSS Module Typed插件

安装依赖

# require
npm install -g typed-css-modules

# 使用less
npm install -g less

# 使用scss
npm install -g node-sass

使用方法

在需要有智能提示的样式文件顶部加注释

// @type

or

/* @type */

这样的写法又遇到了习惯上问题, 可能是静态页面写多了, 个人习惯先写html再写样式.

问题2

每次写className的时候都加上一个style感觉很麻烦,
而且我们写页面一般会使用到emmet语法, 写完还要对dom进行返工.

反正我看很多人是写完了一个一个手动替换的

为此, 我在想能不能匹配到className="xxx"中的字符串, 通过正则表达式替换为className={style.xxx}

于是我写了这样一个正则

const exp = /className="w+"/g

放在vscode的查找框

居然只匹配到了一项, 先不管这么多, 取出w+的内容是关键

于是加了一个小括号

const exp = /className=("w+")/g

因为使用style['xxx']的方式取值我刚好需要引号, 然后在替换框输入className={style[$1]}

点击替换, 果然有奇效, 不过还有一些className没有匹配到.

我们通常会使用xxx-xxx来命名

所以我的正则改为了

const exp = /className=("w+-w+")/g

遇到'xxx-xxx-xxx'的怎么办呢?

每次改一下正则继续替换,我可真是个小机灵鬼

现在的问题是, 多个类名的怎么办?

想不出怎么办, 干脆直接把正则改为

const exp = /className=(".+")/g

多个类名的再手动修改一下.

虽然没能一键解决问题, 至少不用一个一个改了吧?

vscode插件

想偷懒的人可不会就此罢休.

确实没找到相应的插件替换, 参照px2rem插件的源码写了一个classnames插件, 功能虽然很简单, 但却有很多bug, 不过还是勉强能用.

vscode插件搜索 classnames

对, 就是这个 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑

啊? 什么? 最后一个名叫Classnameify的插件就是我要的功能?

大意了

使用方法

cmd/ctrl + shift + P使用命令 Convert ClassName

JSX/TSX文件中右键

快捷键? 我不会告诉你是cmd/ctrl + shift + A, 那个傻逼不知道这是微信截图的快捷键, 手动改了

配置

classnames名字修改

哦, 对了如果你引入的classnames是其他名字

import cls from 'classnames'

可以修改Classnames字段

同理

import classes from './index.module.scss'

可以修改Module Name字段

如果你不怕文件覆盖/丢失, 可以勾选Copy

可以将

import './index.css'

修改为

import style from './index.module.css'

并复制./index.css文件为./index.module.css

为啥没引入 classnames

我忘了

希望大家吐槽

顺便问一下大家平时是怎么写的, 分享一下划水/摸鱼/偷懒的技巧呗