根据选择器将 CSS 输出拆分为多个文件

问题描述

我正在处理一个网站，该网站经过改造以支持“主题化”系统。这个主题系统是通过一个 SCSS mixin 完成的，它基本上将内容包装在一个选择器中。一个（简化的）例子，因为它的细节并不重要。

输入：

.test {
  @include theme() {
    background: $my-theme-variable;
  }
}

输出：

.theme-base .test {
  background: blue;
}
.theme-other .test {
  background: red;
}

这很棒，但不幸的是，这意味着我输出的 CSS 文件中包含所有“主题”变体，这对于未使用的主题的性能来说并不是很好。这种方法在整个代码库中使用，并且不适用于重构应用。

我目前使用 Webpack 4 作为我的构建工具，具有处理我的 SCSS -> CSS -> PostCSS -> 提取到 CSS 文件的标准管道。 我想根据选择器进一步拆分我输出的 CSS。示例：以 .theme-other 开头的所有内容都拆分为另一个文件（任何名称）。

不过，我还没有遇到任何可以处理此问题的方法，如果我必须编写自定义解决方案，我想考虑采用什么方法。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）