CSS模块和汇总-生成具有相同哈希值的单独CSS文件（“主题”）

Question

我在一个组件库项目中使用了CSS模块（SAS）和汇总，它运行良好。每个组件最后都有一个dist文件夹，其中包含一个JS包文件，以及一个相应的CSS文件，其中包含范围明确的CSS类，因此组件的使用者不必担心CSS类名冲突。他们所做的就是包含JS包和CSS文件，一切都很棒。是的CSS模块。

我现在面临的问题是，一些组件确实需要单独的“主题”——理想情况下，每个主题一个单独的CSS文件。因此，消费者可以继续他们一直在做的事情：包括JS捆绑包，但现在选择包含哪个CSS文件来选择主题。

我不知道如何在CSS模块中实现这一点

这将使组件的使用变得极其简单——只需包含一个不同的CSS文件即可。

有什么建议吗？

Answer 1

如果我没弄错，请考虑查看SCSS插件：rollup-plugin-scss。它捕获组件中导入的所有备用. css文件，然后通过底层node-sass处理它们。问题是，您似乎可以编写一个自定义回调函数，根据您输入的条件以不同的方式处理您的CSS。

基于插件页面中的示例：

import scss from 'rollup-plugin-scss'
...

export default {
  input: 'src/index.tsx',
  output: [...],
  plugins: [
    ...
    output: function (styles, styleNodes) {
      // replace this with conditioned outputs as needed:
      writeFileSync('bundle1.css', styles)
      writeFileSync('bundle2.css', styles)
    },
  ]
}

Answer 2

太晚了，但让我在3年后回答这个问题。所以我最终做的是将CSS生成步骤与汇总完全分离，并依靠Sass CLI来处理构建过程的那一部分。这感觉有点笨拙，但我记得这并不难做到，并解决了我上面概述的问题。我不相信当时有简单的汇总解决方案，我也不认为今天有。

然而就我而言，整个方法有点错误。这当然不是每个人都会遇到的情况，但让我详细说明一下，因为它可能很有用，而且当时对我来说肯定不明显。

这是一个内部共享组件库，其中每个组件及其对应的CSS都是存储在我们的Artifactory中的一个单独的npm包。当它增长时，会弹出大量的内部引用，例如，多个组件会引用按钮组件，随着时间的推移，它们会引用按钮组件的不同版本——每个版本都需要自己的范围适当的CSS，这是该软件包版本所特有的。

所以我发现，通过这种方式——将CSS生成为npm包dist文件的一部分——我必须为消费者应用程序编写一个附加层，该层将为我们自己的内部组件解析它们的节点模块/文件夹，并将所有不同的CSS文件结合起来，例如按钮的多个版本。e、 g.主应用程序将直接导入按钮v1。0.0在其包中。json文件，但对话框组件（也包含在package.json中）可以包含按钮2.0.0作为其自身的依赖项。对于软件包的每个版本，都有一个范围独特的CSS版本——因此消费应用程序必须包含每个版本，否则样式就会被破坏。

所以总的来说，它比我想要的要复杂得多。我想我可以让它更简单