在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
我忘了
希望大家吐槽
顺便问一下大家平时是怎么写的, 分享一下划水/摸鱼/偷懒的技巧呗
