高級搜索和替換 for.module.css

Question

我使用的是傳統的import './App.css'並且只使用 className 來影響我的反應應用程序的樣式。 我將我的 React 應用程序構建為具有一個儀表板視圖組件，該組件呈現各種儀表板組件（配置文件、統計信息等），因此我必須將所有儀表板組件導入視圖組件並使用Routes鏈接它們。 但我注意到儀表板視圖沒有按我想要的方式顯示，所以我轉到檢查選項卡，令我驚訝的是，所有具有相應類名的導入組件的所有css樣式都相互影響。 所以我決定使用.module.css來專門呈現樣式，但這是我的問題......我的代碼很重，將className="tool-links flex-column"更改為className={`${styles.tool-links} ${styles.flex-column}`}手動。 有什么工具可以有效地處理數千行代碼嗎？ 謝謝你。 請原諒任何錯別字

Answer 1

在思考這個問題 24 小時后，我發現了一個解決方法。 而不是從傳統的 css 樣式更改為 css 模塊，我可以在 class 名稱中添加一個前綴來區分每個樣式，例如（ className="content"現在變成className="edit-profile-content"並且沒有兩個 classNames會是一樣的，這可以用 VSCode 查找和替換工具輕松完成。我認為這只是常識。