React Typescript NPM 包中的外部 CSS

Posted 2023-02-19

【中文标题】React Typescript NPM 包中的外部 CSS

【英文标题】：External CSS in React Typescript NPM package

【发布时间】：2021-12-24 23:51:00

【问题描述】：

我有一个用于创建一些组件的 React Typescript Storybook 项目。我正在使用 Rollup 将这些组件（非故事书文件）捆绑为可重用的 NPM 包。

除了我的组件使用引导程序进行样式设置这一事实之外，我还有这个工作 - 我如何/将它捆绑到我的包中的最佳方法是什么？

【参考方案1】：

我通过使用 require JS 解决了这个问题。例如，在我的 index.ts 文件中，我执行以下操作：

import logo from "./stories/assets/scts-logo-sm.png";
require("bootstrap/dist/css/bootstrap.min.css");
require("bootstrap-icons/font/bootstrap-icons.css");

export  logo ;
export * from "./stories/Button";
export * from "./stories/Footer";
export * from "./stories/Header";

不知道这是否是最佳实践 - 故事书/汇总文档在这方面不是很好...... CSS 模块可能是另一种方法