基于变量，仅反应负载一个scs

Question

UPDATE：我弄清楚了发生了什么，任何人都无法回答，因为有很多信息缺失，比如导出到的明暗变量文件在哪里。回答，无处不在。。。他们到处都在导出，所以很自然，这两个文件都包含在前端。

在我之前的问题上，我尝试了一种不同于我在网上找到的方法。

我没有尝试基于应用程序变量和样式表的扩展加载某些样式表，而是定义了两个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目录中有这个变量吗？我把它们移得更高了，两个都还装着。我已经清除了缓存，删除了构建，以使其尽可能干净，但没有成功。

我被难住了。非常感谢指导！

Answer 1

下面是发生的事情：我导出了main index.js中的亮变量和暗变量组件，所以无论这两个组件都被编译到应用程序中。

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