基于文件加载的 scss 更改变量

Question

在我的 react 应用程序中，我延迟加载了 2 个主题文件，分别用于浅色模式和深色模式。我想为每种颜色设置 1 个变量，而不是 2 个变量（即：$bgLight: white 和 bgDark: black）。我尝试做的是延迟加载深色和浅色模式 scss 文件。如果主题是浅色模式，我想根据主题更改我的主变量，这样当我在代码中使用变量时，我只使用 $bgColor 而不使用任何条件或添加类。

我尝试使用@use '' with () scss 语法，但它不起作用。在我的主要 variables.css 文件中，我将 bgColor 设置为$bgColor: black !default;。加载光照模式 scss 文件时，它不会更改 bgColor。如何在光照模式 scss 文件中更改它

Answer 1

这不是你想要的。尽管如此，它解决了你的问题。

使用 css 内联变量。

黑暗模式

<div class="o-grid" style="--bg-color: black">
    <aside></aside>
    <main></main>
</div>

灯光模式

<div class="container" style="--bg-color: white">
    <aside></aside>
    <main></main>
</div>

.container {
    background: var(--bg-color);
}

https://ishadeed.com/article/css-variables-inline-styles/