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

【问题标题】：Building separate Stylesheets for different themes with webpack使用 webpack 为不同主题构建单独的样式表
【发布时间】：2018-03-19 00:23:23
【问题描述】：

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

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

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

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

例子：

themes.scss：

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

button.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一起使用的解决方案。任何正确方向的提示将不胜感激！ :)

【问题讨论】：

你想出解决方案了吗？我正在尝试做一些非常相似的事情。
将主题变量拆分为单独的 2 个条目文件。每个条目应该只指定它关心的一组主题值。您的 mixin 将循环遍历您定义的每个主题条目文件的那一组。

标签： css reactjs webpack sass

【解决方案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 语句，因为我们会将主题特定变量导入到它们自己的单独文件中，如下所示

button.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;
 }

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

【讨论】：