具有Rollup和Sass的反应树可摇动组件库

Question

我不确定是否可以通过汇总（或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"汇总会复制该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库

结论

到目前为止，我还不知道一种支持完全摇树（包括CSS）的解决方案，同时也不会给使用中的应用程序带来额外的复杂性。但我目前仍在研究此主题，如果发现有趣的内容，将在此处发布更新。