使用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"
汇总会复制该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）的解决方案，同时也不会给使用中的应用程序带来额外的复杂性。但我目前仍在研究此主题，如果发现有趣的内容，将在此处发布更新。

Answer 2

查看库tailwindcss。它会自动清除未使用的 css 变量。