CSS 模块和汇总 - 生成具有相同哈希值的单独 CSS 文件 ("themes"

Question

我在组件库元素中使用带有汇总的 CSS 模块(Sass)，效果很好。每个组件最终都有一个 dist 文件夹，其中包含一个 JS 包文件，以及一个具有范围 CSS 类的相应 CSS 文件，因此组件的使用者不必担心 CSS 类名冲突。他们所做的只是包含 JS 包和 CSS 文件，一切都很棒。耶 CSS 模块。

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

我不确定如何使用 CSS 模块和汇总来实现这一点，以及这是否是其他人正在采取的那种方法。从我所见，rollup 总是处理捆绑在一起的东西，而我想要单独的 CSS 文件，所有这些文件在构建阶段都以相同的方式重命名它们的类。这样，如果在我的 JS 中我指的是 styles.myclass , 如果 myclass已重命名为 scoped-myclass对于原始 CSS 文件，通过 CSS 模块，对于第二个 CSS 文件，它也将获得相同的名称。

这将使组件的使用变得非常简单——只需包含一个不同的 CSS 文件。

有什么建议么？

Answer 1

太晚了，但让我在三年后回答这个问题。所以我最终做的是将 CSS 生成步骤从汇总中完全分离出来，并依靠 Sass CLI 来处理构建过程的这一部分。感觉有点笨拙，但我记得这并不是很难做到并解决了我上面概述的问题。我不相信当时有一个简单的汇总解决方案，我认为今天也没有。
但是......在我的情况下，整个方法有点错误。这当然不会是每个人的情况，但让我把它全部说明，因为嘿它可能很有用，而且当时对我来说绝对不是显而易见的。
这是一个内部共享组件库，其中每个组件及其对应的 CSS 都是存储在我们的 Artifactory 中的单独的 npm 包。当它增长时，会弹出大量内部引用，例如多个组件将引用 Button 组件，并且随着时间的推移，它们将引用 Buttons 组件的不同版本——每个组件都需要其自己的适当范围的 CSS，对于该包版本来说是唯一的。
所以我发现通过这种方式 - 将 CSS 生成为 npm 包 dist 文件的一部分 - 我必须为消费者应用程序编写一个附加层，它将解析它们的 node_modules/文件夹以获取我们自己的内部组件并组合所有不同的 CSS 文件，例如多个版本的按钮。例如主应用程序将直接在其 package.json 文件中导入按钮 v1.0.0，但 Dialog 组件(也包含在 package.json 中)可以包含按钮 2.0.0 作为其自己的依赖项。对于包的每个版本，都有一个唯一作用域的 CSS 版本 - 所以消费应用程序必须包含每个版本，否则样式会被破坏。
所以总而言之，它最终变得比我想要的更复杂。我认为我可以将单独生成的主题 CSS 文件作为包 dist 的一部分让它变得更容易和更好，但结果并非如此。如果我今天可以重新访问那个元素，我会重新检查 Material UI 和其他我当时有点讨厌的解决方案:由组件 JS 自动将 CSS 注入(inject)页面，而不是生成独立的 CSS 文件，需要消费者应用程序进行额外的工作才能收集并添加到最终网页。坦率地说，现在我认为它是“最少的废话”。注入(inject)方法有一定的缺点(在为每个人渲染的每个页面上都做了额外的工作!哎呀!)，但毫无疑问，它极大地简化了消费者应用程序的工作。这是一个平衡的行为，但在 20-20 事后看来，我倾向于注入(inject)方法。有了这个，范围和主题是一个不同且简单得多的问题。