使用 Rollup 和 Sass 响应可摇树组件库

Question

我有一个需求，我不确定是否可以使用 Rollup（或使用 Webpack？）

我写了一个 React 组件库。每个组件都导入它的样式表。就像是

import "./button.scss"

export default function Button() {
...
}

现在，这些 scss 文件使用我想在全局文件中定义的各种 sass 变量。我希望我的图书馆的使用者能够Button像这样导入：

import { Button } from "mylib"甚至更好： import Button from "mylib/button" 并且只将所需的代码Button添加到我的库中。

我一生都无法弄清楚/谷歌如何实现这一目标。

是否有对使用 sass 和 sass 变量的可摇树 React 组件库的良好参考？

额外问题：我有一些第三方 css，只有部分组件需要。所以，如果每个组件的 scss 文件都导入： @import "~some-third-party-css-lib.css"
Rollup 会复制那个 css 吗？或者是否有某种去重机制？

谢谢！

Answer 1

据我所知（2020 年 2 月），为组件库实现良好的摇树结果的唯一选择是：

使用 css 模块时

1. 您需要依靠库的使用者来处理 (s)css 导入（例如 Create React App 就做得很好）
2. 确保不要在包中转译/捆绑 css 并且导入路径正确
3. 使消费者分别导入每个组件 ( import Button from "mylib/button")。这是因为大多数打包程序都认为 css 导入是副作用，并且很难（甚至不可能）判断实际使用了哪些类。因此，如果您的库中有一个重新导出所有组件的索引，这会导致所有 css 被导入并可能被捆绑。

使用带有运行时的 css-in-js 系统时

1. 还要确保您没有在库构建步骤中预先捆绑/导出 css，而是将其留给消费应用程序。

这有一些应该考虑的影响。

1. 组件的使用者必须在其应用程序旁边提供 css-in-js 运行时
2. 如果消费者试图以某种方式进行服务器端预渲染，这可能需要根据您使用的 css-in-js 库进行自定义附加步骤

结论

到目前为止，我不知道一个支持完整的 tree-shaking（包括 css）同时也不给消费应用程序带来额外复杂性的解决方案。但我目前仍在调查这个话题，如果我发现一些有趣的东西，我会在这里发布更新。