根据状态变量导入不同的 SCSS 文件答案

【问题标题】：Importing different SCSS files based on a state variable根据状态变量导入不同的 SCSS 文件
【发布时间】：2021-01-13 05:49:37
【问题描述】：

我有这个状态变量：

this.state = {
    theme: "light"
}

这个状态被添加到一个 div 类名中，所以它变成 <div class name=`app ${this.state.theme}`>

我还有三个 scss 文件：App.scss、LightTheme.scss 和 DarkTheme.scss。 app.scss 必须导入其中一个主题 scss 文件，因为它们有一些构成主题的颜色变量。

我尝试使用 scss 的 if 语句，但我发现 scss 不能用于检查元素是否包含特定的类名。

使用 JavaScript 导入主题文件也不起作用，因为 app.scss 将具有未定义的变量。

有什么想法吗？

【问题讨论】：

【解决方案1】：

您可以导入这三个文件并将theme 类添加到App.js 中的第一个div，如下所示：

function App() {

  return (
    <div className={`App theme-${this.state.theme}`}>
    ...
    </div>
  );
}

您将导入所有三个 scss 文件，然后在里面说 DarkTheme.scss，您可以执行以下操作：

// ThemeDark.scss
.theme-dark {

  h1 {
    color: white;
  }

  .navigation {
     background-color: darkblue;
  }
}

// ThemeLight.scss
.theme-light {

  h1 {
    color: black;
  }

  .navigation {
     background-color: lightgray;
  }
}

等等。就我而言，我总是使用默认导入的轻量版本，但按照您的建议进行操作可能是一个很好的划分，并且有一个主题中性的 css 文件：

// App.scss
h1 {
   font-size: 2em;
}

.navigation {
   position: absolute;
}

【讨论】：

我所有的样式都在 app.scss 中。主题文件仅包含颜色变量。我考虑过按照您建议的方式进行操作，但稍后我会为不同的组件添加更多 scss 文件，因此我最终会一遍又一遍地编写颜色。
是的，确实有很多重复。您可以使用 CSS 变量或 SASS-themed，最后几篇文章似乎是一种有趣的方法，因为您只需要定义一个文件。就我而言，我通常会定义一个 colors.scss 文件，这样我就可以做 $gray_dark 或 $gray_50 等。

【解决方案2】：

你不能将 App.scss 作为第一行导入到LightTheme.scss 和DarkTheme.scss 吗？

@import "../../App.scss";  /*add path to App.scss*/

然后您可以调用LightTheme.scss 或DarkTheme.scss，这应该可以按您的预期工作。

编辑

“我所有的样式都在 app.scss 中。主题文件只包含颜色变量。”

在其中添加这两行。

@import "../../LightTheme.scss";  /*variables*/
@import "../../App.scss";  /*styles*/

在其中添加这两行。

@import "../../DarkTheme.scss";  /*variables*/
@import "../../App.scss";  /*styles*/

现在只需按照您的计划调用 light-theme.scss 或 dark-theme.scss。

【讨论】：