根据变量反应仅加载一个scss答案

【问题标题】：React load only one scss based on variable根据变量反应仅加载一个scss
【发布时间】：2022-09-22 23:59:20
【问题描述】：

更新：我知道发生了什么，但没有人可以回答，因为缺少很多信息——比如明暗变量文件被导出到哪里。答案，无处不在……他们到处都在导出，所以很自然地，这两个文件都包含在前端。

扩展我的previous question，因为我尝试了一种不同于我在网上找到的方法。

我没有尝试基于应用程序变量和样式表的扩展来加载某些样式表，而是定义了两个 css 变量文件，并且只希望为前端应用程序加载一个。

import React, {lazy, Suspense} from \"react\";
import ApplicationVariable from \"./appVars\";
import LoadingComponent from \"../loadingComponent\"; // our fallback

// I made 2 components that import the light/dark-variables.scss files;    
const LightThemeVariables = lazy(() => import(\"./light-variables\"));
const DarkThemeVariables = lazy(() => import(\"./dark-variables\"));

export const ThemeSelector = ({ children }) => {
    return (
        <>
            <Suspense fallback={<LoadingComponent loading={true} />}>
                {ApplicationVariable.isLight() ? <LightThemeVariables /> : <DarkThemeVariables  />}
            </Suspense>
            {children}
        </>
    );
};

// Then in the frontend application I wrapped my app in the ThemeSelector
ReactDOM.render(
        <ThemeSelector>
            <App />
        </ThemeSelector>,
    document.getElementById(\'root\')
);

根据我读到的内容，上述操作将使我的应用程序有时间确定它需要哪些变量文件，然后在使用可供用户使用的加载组件做出“决定”后加载应用程序，作为发生某事的反馈。

它有效，我可以看到加载程序，但是我仍然得到两个变量文件。

可能是因为我在src 目录中有变量吗？我把它们移得更高了，它们都还在加载。我已经清除了缓存，删除了构建以使其尽可能干净但没有成功。

我很难过。指导将不胜感激！

标签： reactjs sass css-variables react-suspense react-lazy-load

【解决方案1】：

这是发生的事情：我在主 index.js 中导出明暗变量组件，因此无论两个组件都被编译到应用程序中。

只有ThemeSelector 应该使用变量文件，所以我限制了导出并确保它们只被拉入ThemeSelector 组件，然后条件有权决定加载哪些变量文件。

【讨论】：