CSS 模块和汇总 - 生成具有相同散列的单独 CSS 文件 ("themes")

Question

我在组件库项目上使用 CSS 模块 (Sass) 和汇总，效果很好。每个组件最终都有一个包含单个 JS 包文件的 dist 文件夹，以及一个具有范围 CSS classes 的相应 CSS 文件，因此组件的消费者不必担心CSS class 名称冲突。他们所做的只是包含 JS 包和 CSS 文件，一切都很棒。是的 CSS 模块。

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

我不确定如何使用 CSS 模块和汇总来实现这一点，也不知道这是否是其他人正在采用的方法。据我所知，rollup 总是将东西捆绑在一起，而我想要 separate CSS 文件，所有这些文件在构建过程中都得到相同的 classes 重命名阶段。这样，如果在我的 JS 中我引用 styles.myclass，如果 myclass 已被 CSS 模块重命名为 scoped-myclass 用于原始 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 是一个单独的 npm 包，存储在我们的 Artifactory 中。当它成长时，会弹出大量内部参考，例如多个组件将引用 Button 组件，并且随着时间的推移，它们将引用 Buttons 组件的不同版本 - 每个组件都需要其自己的适当范围 CSS，对于该包而言是唯一的-版本。

所以我发现通过这种方式 - 将 CSS 作为 npm 包 dist 文件的一部分生成 - 我不得不为 consumer 应用程序，它们会为我们自己的内部组件解析它们的 node_modules/ 文件夹，并组合所有不同的 CSS 文件，例如按钮的多个版本。例如主应用程序将直接在其 package.json 文件中导入按钮 v1.0.0，但对话框组件（也包含在 package.json 中）可以包含按钮 2.0.0 作为其自身的依赖项。对于包的每个版本，CSS 都有一个唯一范围的版本 - 因此使用应用程序必须包含每个版本，否则样式会很乏味。

所以总而言之，它比我想要的要复杂得多。我认为我可以通过将单独生成的主题 CSS 文件作为包 dist 的一部分来使它变得更容易和更好，但它并没有以这种方式结束。如果我今天能重新审视那个项目，我会重新检查 Material UI 和其他人使用的解决方案，我当时有点 poo-poo： [=31= 的自动注入] 通过组件 JS 进入页面，而不是生成独立的 CSS 文件，这需要消费者应用程序进行额外的工作才能收集并添加到最终网页。坦率地说，现在我将其视为“最不废话”。注入方法有明显的缺点（在为 每个人 呈现的每个页面上完成额外的工作！哎呀！），但在我看来毫无疑问它极大地简化了消费者应用程序的工作。这是一种平衡行为，但在 20-20 事后看来，我会倾向于注入方法。因此，范围界定和主题化是一个不同且简单得多的问题。

CSS 模块和汇总 - 生成具有相同散列的单独 CSS 文件 ("themes")

CSS modules and rollup - generating separate CSS files ("themes") with same hashes

css

rollup

css-modules