Question

我在组件库项目上将CSS模块（Sass）与汇总一起使用，效果很好。每个组件都以一个dist文件夹结尾，该文件夹包含一个JS捆绑文件，以及一个带有范围CSS类的对应CSS文件，因此该组件的使用者不必担心CSS类名冲突。他们所做的只是包括JS包和CSS文件，一切都很棒。 Yay CSS模块。

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

我不确定如何通过CSS模块和汇总来解决这个问题，以及这是否是其他人正在采用的方法。据我所知，汇总总是将捆绑在一起处理，而我想要分离 CSS文件，所有这些文件在构建阶段都将其类重命名为相同的名称。这样，如果在我的JS中我引用的是styles.myclass，如果myclass已被原始CSS文件的CSS模块重命名为scoped-myclass，那么对于第二个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)
    },
  ]
}

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

1 个答案: