React 16升级至18.2后JS文件中CSS导入失效求助

1. 构建工具的CSS处理配置变更 #

这是最常见的原因，升级过程中Webpack/Vite/CRA等构建工具的CSS loader配置大概率发生了变化：

• 若之前启用了CSS Modules（比如css-loader配置了modules: true），升级后配置被重置为默认值，普通.css文件不再被处理为模块，styles对象就会是空的。如果你的代码依赖styles.xxx获取类名，自然会失效；即便直接写硬编码类名（比如你代码里的toolbar-container），也可能因CSS未被正确注入页面而失效。
• 若使用Create React App，升级到适配React 18的v5版本后，普通.css文件仍默认全局生效，但如果项目用react-app-rewired等工具自定义过配置，升级后自定义规则可能失效，导致CSS无法被打包。

2. CSS文件未被正确打包注入 #

• 检查Webpack配置中是否还配置了style-loader或mini-css-extract-plugin：Webpack 5升级后，这类插件的用法有调整，若未适配新配置，CSS可能不会被提取或注入到页面中。
• 查看构建产物：检查最终生成的bundle.css或页面内嵌的style标签，确认toolbar-container的样式是否存在。

3. 导入方式与构建配置不匹配 #

• 若不需要CSS Modules，应使用无赋值的导入：import './toolbar.css';，而非import styles from './toolbar.css';——后者在非Modules模式下只会得到空对象，虽不影响全局CSS生效，但如果此时CSS没起作用，说明导入的CSS根本没被处理。
• 若确实需要CSS Modules，要么将文件名改为toolbar.module.css（CRA默认规则），要么在css-loader中配置modules: true，强制所有.css文件按模块处理。

4. 第三方依赖兼容性问题 #

升级React时通常会同步升级webpack、css-loader、style-loader等依赖，不同版本间的兼容性冲突可能导致CSS处理失败。可以尝试将这些依赖锁定到之前能正常工作的版本，验证是否恢复正常。

快速排查步骤 #

1. 先把导入语句改成import './toolbar.css';，去掉styles变量，看页面是否能加载到toolbar-container的样式。如果能，说明是CSS Modules配置的问题；如果还是不能，说明CSS未被打包注入。
2. 查看构建日志，寻找CSS处理相关的警告或错误信息。
3. 对比升级前后的webpack.config.js（或CRA自定义配置），检查CSS相关loader的配置变更。

内容的提问来源于stack exchange，提问作者user2782