css - 使用 webpack 为不同的主题构建单独的样式表

Question

现在我们正在使用 scss mixin ( https://github.com/zellwk/themify ) 为我们应用中的 React 组件提供不同的主题。

效果很好，但在编译的 css 文件中会产生相当长的选择器链。

虽然我们确实必须提供在运行时更改主题的能力(这对于当前的解决方案来说并不麻烦，我们只需要在 body 元素上切换一个类名)，但默认用例是主题不会更改。

因此，我们考虑通过将样式表拆分成单独的文件来降低样式表的复杂性和文件大小。

示例:

主题.scss:

$themes: (
  red: (
    mainColor: #aa3939,
    secondaryColor: #D46A6A
  ),
  blue: (
    mainColor: #2e4272,
    secondaryColor: #4f628e
  )
);

按钮.sccs

@import 'themes.scss';

.button {
  @include themify($themes) {
    color: themed('secondaryColor');  
    background-color: themed('mainColor');  
  }}
}

这变成了:

.theme-red .button {
  color: #D46A6A;
  background-color: #aa3939;
}

.theme-blue .button {
  color: #4f628e;
  background-color: #2e4272;
}

现在我希望它变成:

theme-red.css:

.button {
  color: #D46A6A;
  background-color: #aa3939;
}

theme-blue.css:

.button {
  color: #4f628e;
  background-color: #2e4272;
}

我们不依赖于 themify mixin，我们可以将其更改为可以与 webpack 一起使用的任何一种解决方案。任何正确方向的提示将不胜感激! :)

Answer 1

@ManuKaracho，我尝试在这两个教程的帮助下使用类似的方法，但遇到了与您面临的相同问题。

Sass Theming: The Neverending Story

Theming Web Apps with SASS

CSS 在单个文件中生成，而不是在两个单独的文件中生成。我想像你一样生成两个单独的 CSS 文件。我对这个问题做了一些研发，最后想出了如何做到这一点。

首先，您需要将 themes.scss 文件分成两个单独的文件，如下所示。

_theme-red-variables.scss

$themes: (
    red: (
      mainColor: #aa3939,
      secondaryColor: #D46A6A
   )
);

_theme-blue-variables.scss

$themes: (
    blue: (
      mainColor: #2e4272,
      secondaryColor: #4f628e
   )
);

接下来，您需要对 button.scss 文件进行一些更改。只需从顶部删除 @import 语句，因为我们会将主题特定变量导入到它们自己的单独文件中，如下所示

按钮.scss

.button {
    @include themify($themes) {
       color: themed('secondaryColor');  
       background-color: themed('mainColor');  
    }
 }

接下来您需要创建两个单独的主题文件。在这些文件中，您需要导入主题特定变量文件、mixin 文件和您的 button.scss 文件

theme-red.scss

// Import red theme variables file
@import 'theme-red-variables';

// Import mixins file, where you have defined themify and themed mixins
@import 'mixins';  

// Import button.scss file in this theme file 
@import 'button';

theme-blue.scss

// Import blue theme variables file
@import 'theme-blue-variables';

// Import mixins file, where you have defined themify and themed mixins
@import 'mixins';  

// Import button.scss file in this theme file 
@import 'button';

使用上述技术将生成两个单独的文件

theme-red.css

.button {
    color: #D46A6A;
    background-color: #aa3939;
 }

theme-blue.css

.button {
    color: #4f628e;
    background-color: #2e4272;
 }

希望我已经很好地解释了解决方案，它将帮助您解决问题。