|
采用next.js开放网站，之前一直用官方插件next-css来开发，突然在next版本10.0.6以上版本的Webpack大的变动以外，把next-css给弃用，真是头大啊。
然后想将网站更换css-module模式。
就要求将
className="project_headerbox_left"
//更换为
className={styles.project_headerbox_left}的样式
一个一个的改，工作量巨大。
所以找到了，vscode里面正则匹配批量替换的功能：
className="([a-zA-Z0-9_]+)"
className={styles.$1}
中间匹配的要用（）括起来，下面替换的才能用$1来取值。($0取当前的所以内容)；
多个样式替换规则：
className="([a-zA-Z0-9_]+) ([a-zA-Z0-9_]+) ([a-zA-Z0-9_]+) ([a-zA-Z0-9_]+)"
className={`${styles.$1} ${styles.$2} ${styles.$3} ${styles.$4}`}
import '([a-zA-z0-9./]+).css';
import styles from '$1.module.css';
不是很会正则表达式，大家有更好的正则欢迎告知。
如果关于css更改css-module模式有更好的办法，非常欢迎大家来讨论及分享
| 
转播
