Question

目前我们正在使用scss mixin（https://github.com/zellwk/themify）为我们的应用中的反应组件提供不同的主题。

它工作得很好，但在编译的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;
}

现在我希望这成为：

主题red.css：

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

主题blue.css：

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

我们并不依赖于通知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语句，因为我们将特定于主题的变量导入到它们自己的单独文件中，如下所示

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

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

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

1 个答案: