我创建了一个样式库

你们可能还记得我之前写的一篇关于如何创建自己的 React 应用模板的博客。在我创建的模板中，我有一个 Global 文件夹，里面有一个主题对象，其中包含我所有的颜色变量，以及一个我常用的样式组件列表。我还创建了一个 index.css 文件，用于进行一些样式修改，并在其中添加了一个 normalize.css 文件。我非常想把这些东西变成一个样式库，可以直接从中取出，而不用每次都记住相对路径。而且，拥有一个属于我自己的迷你样式库似乎是一个很酷的想法！于是，我开始了一段新的旅程……

研究阶段

我找不到任何关于如何创建样式库并将其发布到 npm 的博客。我感觉很迷茫！我甚至没有起点。我开始尝试寻找入门方法，但总是一无所获。我只想创建一个类似于 react-strap 的样式库。你可以从“react-strap”中导入所有需要的组件，然后创建我的 index.css 文件，就像在根目录 index.js 中导入 bootstrap.css 一样。我目前正在使用 normalize.css 并将其导入到根目录 index.js 中。Bootstrap 的 css 文件包中已经自带了 normalize 功能……

...然后我突然明白了...

我立刻打开浏览器，在 npm 上搜索 react-strap、bootstrap 和 normalize.css。然后我点击了这三个链接，查看它们的 GitHub 代码！如果找不到文章教我怎么做，那就看看那些我想模仿的人是怎么做的吧！Bazinga

刚开始查看这些软件包里的所有代码时，我感到一阵不知所措。他们用到的很多东西我都不知道是否有必要用。经过一段时间的筛选，我逐渐对它们有了清晰的认识。我花了一整天的时间才让它们运行顺畅，完全符合我的预期，虽然距离目标还有很长的路要走，但我做到了！最终一切都变得不那么难了。

安装/设置

npm i bushido-strap或者yarn add bushido-strap作为依赖项安装。

要获得全局样式大修（包括 normalize.css），请进入根 index.js 文件并import "bushido-strap/css/styles.css。

如果您使用 sass，您甚至可以@import "bushido-strap/sass/styles/variables.scss";在 scss 文件的顶部执行此操作来获取我的所有颜色变量。

样式化组件

有关我的样式库包含的内容以及各个部分的功能的更多文档，请查看我的 npm。

导入组件和从 React-strap 导入一样简单。如果你有一个、两个或五个带样式的组件，导入起来也很简单！只需……import { Wrapper, FlexBox, Button } from "bushido-strap"就完成了！你现在可以开始使用我的新样式库了！

感谢阅读！

如果您对分步指南感兴趣，请留言或私信我，我一定会为您准备一份。别忘了看看我的自定义 React 应用模板，它已经集成了这个库。再次感谢大家。节日快乐！