如何解决ReactJS 中的可定制组件库
我正在尝试创建一个可定制的 ReactJS 组件库。为此,我考虑了 create-react-library。组件开发基本完成。我已将所有组件放在不同的目录中,并在 index.js 的帮助下一次性导出所有组件。所有组件也有关联的本地 scss 文件。这些组件级 scss 文件从另一个 variables.scss 引用,其中包含 scss 变量,例如,
$primaryColor: #ff0000;
$secondaryColor: #000000;
这个问题有两部分。
-
有没有什么办法不把scss编译成一个css呢? 发布包。目前 create-react-library 正在编译所有 将 scss 放入名为 dist 的文件夹中作为 index.css,它不会给出 使用 scss 变量从父项目更新样式的选项。
-
scss编译问题解决后,如何更新 这些来自父项目的变量(开发人员将在 使用创建的包)。
非常感谢任何形式的帮助。
解决方法
经过几天的研究,我终于解决了这个问题。发布解决方案以便有人受益。
我们发布的时候有没有什么办法不把scss编译成一个css 包。目前 create-react-library 正在编译所有的 scss 进入一个名为 dist 的文件夹,作为 index.css,它没有提供选项 使用 scss 变量从父项目更新样式。
对于捆绑,微捆绑是用 create-react-library 开箱即用的。我将其移至 rollup,它提供了许多捆绑选项。然后我使用 rollup-plugin-copy 将我的组件(当然没有编译)简单地复制到 dist 文件夹中。
plugins: [
copy({
targets: [
{ src: 'src/assets/**/*',dest: 'dist' },{
src: ['src/components/**/*','!**/*.spec.*'],dest: 'dist',},],verbose: true,flatten: false,})
]
scss编译问题解决后,如何更新 这些来自父项目的变量(开发人员将在其中使用 创建的包)。
如您所见,从我上面的代码片段中,我将相关的资产(主题 css 甚至组件)复制到我的 dist 文件夹中。对我来说,这已经绰绰有余了。我需要做的就是导入 scss 文件(到 index.scss 的底部。这很重要,因为即使在从 node_modules 加载样式之前,也应该加载需要覆盖的 scss 变量)我必须提供给消费者应用。 请查看 sass default values for variables 以了解如何从消费者应用程序更新 scss 变量。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。