Open iamsiutw opened 5 years ago
為了避免樣式命名衝突造成汙染的情況發生，使用 CSS Module 是個不錯的解決方案之一，要在 React 專案中使用 CSS Module 可以遵循下面的步驟：
create-react-app 建立的專案樣板，把所有的設定檔案都包在 node_modules/react-scripts 中，因此要先執行 eject 把設定檔案彈出。
npm run eject
彈出後可以在 config/jest 資料夾中找到 webpack.config.js 檔案，打開該檔案找到 cssRegex 部分，並作如下設定：
{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, modules: true, localIdentName: '[name]__[local]__[hash:base64:5]' }), sideEffects: true, },
如此一來 webpack 在打包時就會根據正則設定將 class 名稱 hash 成獨一無二的字符串來避免 class 衝突的問題。
詳細的 CSS Module 使用觀念可以參考這些文章：
日期: 2019/3/14 THU
目標: 27/30
React CSS Module
為了避免樣式命名衝突造成汙染的情況發生，使用 CSS Module 是個不錯的解決方案之一，要在 React 專案中使用 CSS Module 可以遵循下面的步驟：
create-react-app 建立的專案樣板，把所有的設定檔案都包在 node_modules/react-scripts 中，因此要先執行 eject 把設定檔案彈出。
彈出後可以在 config/jest 資料夾中找到 webpack.config.js 檔案，打開該檔案找到 cssRegex 部分，並作如下設定：
如此一來 webpack 在打包時就會根據正則設定將 class 名稱 hash 成獨一無二的字符串來避免 class 衝突的問題。
詳細的 CSS Module 使用觀念可以參考這些文章：