React项目中SCSS mixin结合React Router使用不生效如何解决

新建React项目使用SCSS开发多主题功能，参考教程编写的主题mixin在非路由组件中可正常生效，接入React Router后，路由渲染的组件无法响应html根节点挂载的主题类，将主题规则绑定到*选择器时可临时生效。
相关代码如下：

1. 主题变量文件_themes.scss

// _themes.scss
$themes: (
    light: (
        color-background: #FAFAFA,
        color-card: #FFF
    ),
    dark: (
        color-background: #37474F,
        color-card: #212121
    )
);

2. 主题mixin文件_mixins.scss

// _mixins.scss
@mixin theme-aware($key, $color) {
    @each $theme-name, $theme-color in $themes {
        .theme-#{$theme-name} & {
            #{$key}: map.get(map.get($themes, $theme-name), $color)
        }
    }
}

3. 业务样式文件App.module.scss

//App.module.scss
@import "../../assets/themes/mixins";

.container {
    width: 100%;
    height: 100%;
    @include theme-aware('background', 'color-background');
}

4. 入口组件App.tsx

export default function App() {
    const dispatch = useDispatch()
    const session = useSelector(sessionSelector)
    const theme = useSelector(themeSelector)

    useEffect(() => {
        document.documentElement.className = '';
        document.documentElement.classList.add(`theme-${theme.name}`)
    }, [theme])

    return (
        <div>
            <Home />
            <Routes>
                <Route path={paths.home} element={<Outlet />}>
                    <Route element={<RequireAuth roles={["SUPER"]} />}></Route>
                    <Route element={<RequireAuth roles={["SUPER", "ADMIN"]} />}></Route>
                    <Route element={<RequireAuth roles={["SUPER"]} />}></Route>
                </Route>
            </Routes>
        </div>
    )
}

5. 临时修复方案代码

@import "./assets/themes/mixins";

* {
    @include theme-aware('background', 'color-background');
}

• 移除样式文件的module后缀，修正导入路径
• 直接在App.module.scss中定义相关mixin
• 将主题变量、mixin代码全部写入App.module.scss文件中

• .theme-#{$theme-name}选择器用于匹配父元素上挂载的当前主题类
• 项目明暗主题切换逻辑本身正常，曾尝试将主题类挂载到React根元素上仍未解决路由组件样式问题
• 不涉及map-get的简单mixin可正常运行
• 项目使用Dart Sass，与教程所用的node-sass存在环境差异
• 不接入React Router时mixin可全量正常生效

1. Dart Sass语法适配问题：代码中使用的map.get()是Dart Sass模块化规范的命名空间方法，必须显式引入sass:map内置模块才可正常调用；同时_mixins.scss没有显式引入_themes.scss中的$themes变量，依赖全局注入的变量在路由组件按需编译时会丢失上下文，直接导致对应样式规则生成失败。首屏加载的Home组件样式在构建阶段被整体编译，不会触发该问题，而路由懒加载的组件样式单独编译时就会出现变量找不到、方法无效的问题。
2. mixin逻辑冗余：循环遍历主题map时已经拿到了当前主题对应的色值表$theme-color，代码中二次从$themes中重复取值，增加了编译出错概率。
3. 选择器挂载节点不稳定：仅将主题类挂载到document.documentElement上，在路由组件动态挂载、样式动态注入时，部分浏览器的样式重计算会跳过匹配根节点类名的嵌套规则，导致样式不生效。

1. 修正SCSS文件的依赖与语法，适配Dart Sass规范
   首先修改_mixins.scss，显式引入所有依赖，简化取值逻辑，补全语法分号：

   // _mixins.scss
   @use 'sass:map'; // 显式引入Dart Sass内置map模块
   @import './themes'; // 显式引入主题变量，不依赖全局注入
   
   @mixin theme-aware($cssProp, $themeToken) {
       @each $themeName, $themeTokenMap in $themes {
           .theme-#{$themeName} & {
               #{$cssProp}: map.get($themeTokenMap, $themeToken);
           }
       }
   }
   

2. 配置构建工具全局注入公共SCSS资源，避免每个组件单独写导入导致的路径错误、上下文丢失问题
   以Vite为例，在vite.config.ts中添加配置：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import path from 'path'
   
   export default defineConfig({
     plugins: [react()],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src')
       }
     },
     css: {
       preprocessorOptions: {
         scss: {
           // 全局注入mixin，所有scss文件无需单独导入即可使用
           additionalData: `@use "@/assets/themes/mixins" as *;`,
         }
       }
     }
   })
   

   如果使用react-scripts，可通过craco、react-app-rewired等工具添加等效的scss全局注入配置。
3. 调整主题类挂载节点，在App根容器上同步绑定主题类，提升选择器匹配稳定性
   修改App.tsx的根节点：

   return (
       // 根容器同步绑定主题类，不单独依赖html节点的类名
       <div className={`theme-${theme.name}`}>
           <Home />
           <Routes>
               <Route path={paths.home} element={<Outlet />}>
                   <Route element={<RequireAuth roles={["SUPER"]} />}></Route>
                   <Route element={<RequireAuth roles={["SUPER", "ADMIN"]} />}></Route>
                   <Route element={<RequireAuth roles={["SUPER"]} />}></Route>
               </Route>
           </Routes>
       </div>
   )
   

修复完成后移除之前绑定到*选择器的全局样式，所有组件直接调用@include theme-aware(属性名, 主题token名)即可正常响应主题切换，路由组件样式也会正常生效。 #

内容的提问来源于stack exchange，提问作者Gonçalo Condeço