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模式有更好的辦法，非常歡迎大家來讨論及分享