Storybook渲染React组件时CSS Module样式未挂载问题

isomorphic-style-loader 选型与Storybook客户端预览场景不匹配是该问题的核心诱因。
isomorphic-style-loader 是为SSR同构应用设计的loader，它本身不会自动将解析完成的CSS规则插入到客户端DOM中：默认仅导出CSS Modules生成的类名映射对象，样式插入逻辑需要开发者手动调用其提供的API、或用对应HOC包裹组件才会触发。你当前的代码仅拿到了正确的类名绑定到DOM，但从未执行样式注入逻辑，自然会出现DOM带正确哈希类名、但对应样式规则为空的现象。

你提到「移除isomorphic-style-loader则类名完全无法生成」，本质是删除loader后loader链断裂，css-loader输出的模块没有后续loader处理导致运行报错，并非CSS Modules的类名生成依赖isomorphic-style-loader——开启modules配置的css-loader本身就负责生成哈希类名与映射关系。

按优先级从高到低选择即可：

• 方案1（推荐，适配Storybook预览场景）：替换loader为style-loader
  修改.storybook/main.js中的webpack scss处理规则，将链首的isomorphic-style-loader替换为style-loader即可。注意webpack loader执行顺序为从右到左（从下到上），正确的loader链顺序为：
  style-loader → 开启CSS Modules配置的css-loader → postcss-loader → sass-loader
  style-loader是纯客户端场景的标准loader，会在JS运行时自动将解析完成的CSS规则插入到页面的<style>标签中，不需要额外修改组件代码，替换后重启Storybook即可生效。
• 方案2（项目为SSR架构必须保留isomorphic-style-loader时使用）：补全Storybook端样式注入逻辑
  1. 在.storybook/preview.js中配置全局装饰器，基于isomorphic-style-loader提供的StyleContext统一收集所有组件加载的CSS内容，在渲染时统一插入到页面头部
  2. 所有使用SCSS Modules的组件，必须用isomorphic-style-loader提供的withStyles(styleObj)高阶组件包裹，否则样式不会被上下文收集，也不会被注入到页面
• 兜底校验项
  • 检查css-loader的modules配置，确认exportOnlyLocals参数未被设为true，该参数开启后仅会导出类名映射，不会打包实际CSS内容
  • 检查scss规则的include/exclude配置，确认组件目录下的scss文件没有被规则排除
  • 检查Storybook预览层的全局配置，确认没有自定义逻辑过滤、移除组件注入的样式规则

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