React按变量加载单个SCSS主题文件失败问题及原因解析

问题根源确认 #

此前未明确明暗主题变量文件的导出范围，实际该文件为全局导出，导致前端启动时同时加载了明暗两个主题变量文件。

尝试的解决方案及卡点 #

• 放弃原按样式文件扩展名加载的方案，重新定义两个独立的SCSS变量文件，期望根据应用当前主题仅加载对应文件
• 借助React的lazy和Suspense实现LightThemeVariables与DarkThemeVariables组件的懒加载，将整个应用包裹在ThemeSelector组件中
• 卡点表现：加载器可正常显示，但两个主题变量文件仍会被同时加载；尝试过调整文件位置、清理浏览器缓存、删除构建产物等操作，均未解决问题

最终定位的核心问题 #

经过排查，确认问题核心仍为主题变量文件被全局导出，打包工具会将其判定为必须加载的全局资源，因此无法通过组件懒加载的方式实现按需加载。

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