ReactJS if-else内require构建后异常 误引入非选中主题样式

这个问题是Webpack编译机制导致的，和你写的if分支运行时逻辑没有关系：

• 开发模式下，devServer采用按需模块响应的逻辑，不会提前把所有代码里引用的模块都打包注入页面，代码运行时执行到哪个require语句，它才临时加载哪个模块的内容，所以你看到的分支逻辑是完全正常的。
• 生产打包模式下，Webpack会在编译阶段对所有源码做静态路径扫描，只要是代码里出现的写死了完整路径的require/import语句，不管这段代码放在哪个if/else分支里、运行时会不会真的被执行到，Webpack都会把这些模块标记为项目的正式依赖，全部打包进线上产物。

你写的两个css引入语句，因为路径都是明确写死的静态字符串，Webpack在编译的时候直接把styleDark.css和styleLight.css都识别成了必须加载的依赖，全部打包后自动注入到页面的style标签里。这时候哪怕你运行时永远只走暗色主题的分支，两个样式文件其实已经全部加载在页面上了——如果亮色主题的样式在产物里的注入顺序更靠后、优先级更高，就会表现出“明明弹了暗色的alert，亮色样式却生效”的异常，本质上根本不是运行时执行了else分支的require，是两个css从一开始就被编译流程全量打进去了。

• 改用动态拼接路径的模块引入，避免Webpack把两个css全量打包
  把原来两个独立的静态require语句，改成用变量拼接路径的形式，Webpack会将这类引入识别为动态依赖，自动把每个主题的css拆成独立的样式chunk，只有运行时真正执行到引入语句时，才会加载对应的css文件。示例代码：

  const selectedTheme = "dark";
  // 动态拼接主题css路径，替代原来两个静态require
  import(`./style${selectedTheme === 'dark' ? 'Dark' : 'Light'}.css`);
  alert(`${selectedTheme} Selected`)
  

• 给主题样式做作用域隔离
  哪怕两个css都被全量打包进页面，只要每个主题的样式都加上对应的根类名前缀（比如暗色主题样式全部嵌套在body.dark选择器下，亮色主题全部嵌套在body.light选择器下），就不会出现样式互相覆盖的问题，只需要在切换主题时给页面根节点加上对应类名即可。
• 绕开Webpack的css模块处理流程
  在运行时动态创建<link>标签，根据当前选中的主题加载对应路径的css文件。这种方式下Webpack不会在编译阶段扫描到硬编码的css路径，自然不会把css自动打包注入到产物里。

关键认知差异：Node.js原生的CommonJS模块是运行时才解析require路径的，受if分支控制；但Webpack作为前端打包工具，默认会优先在编译期做静态依赖分析，这类静态写死路径的引入不受运行时条件分支的影响，这是开发环境和生产构建表现不一致的核心原因。

内容的提问来源于stack exchange，提问作者Nurul Alam Ador