reactjs - 使用 Rollup 和 Sass react 可摇树的组件库

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 月)，为组件库实现良好的 tree-shaking 结果的唯一选择是:

使用 css 模块时

您需要依赖库的使用者来处理 (s)css 导入(例如 Create React App 就做得很好)

确保不编译/bundle 中的 css 并且导入路径正确

让消费者单独导入每个组件(import Button from "mylib/button")。这是因为 css 导入被大多数打包程序认为是副作用，而且很难(甚至不可能)分辨出实际使用了哪些类。因此，如果您的库中有一个重新导出所有组件的索引，这会导致所有 css 被导入并可能被 bundle 。

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

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

这有一些应考虑的影响。

您的组件的使用者必须在他们的应用程序旁边提供一个 css-in-js 运行时

如果消费者试图以某种可能需要自定义附加步骤的方式进行服务器端预渲染，具体取决于您使用的 css-in-js 库

结论

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