css写法批量更改css-module模式，vscode 正则匹配批量替换

采用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模式有更好的办法，非常欢迎大家来讨论及分享