为 TypeScript、React NPM 包添加样式答案

【问题标题】：Adding styling to TypeScript, React NPM package为 TypeScript、React NPM 包添加样式
【发布时间】：2020-10-23 14:08:16
【问题描述】：

我有一个 TypeScript(TS) React 项目，我用它来保存我的所有 React 组件。我正在从这个项目中创建一个 NPM 包，然后在单独的 React 项目中使用它。我遇到了一个问题，我不知道如何将样式与 TS 组件一起导出。

使用 NPM 包中的组件会导致错误： Module not found: Can't resolve '../css/footer.css'

当我为打包（dist）创建目录时，我的所有组件都在那里，但没有 CSS。我正在运行tsc 来创建这个目录。我所有的组件和 CSS 都在同一个 src 文件夹中。

这是我的 tsconfig.json 文件：

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

我是否需要将我的样式从 css 文件中移到使用 <style jsx> 标记的 ts 文件中，或者是否有另一种“更好”的方式来实现所需的结果。期望的结果是一个包含所有样式和组件的 NPM 包。

【问题讨论】：

标签： css reactjs typescript npm

【解决方案1】：

tsc 是将 TypeScript 文件编译为 Javascript 的命令。 CSS 文件不是 Typescript 文件，因此它们不包含在编译中。

如果您想导入 CSS（或任何其他资产类型）并将其与其他编译文件一起输出，那么您可能需要使用像 Webpack 或 Rollup 这样的捆绑程序。甚至还有像 Microbundle 这样的工具，它们提供了合理的捆绑器配置，让您可以专注于编写您的库。

或者，您也可以使用 TypeScript 编写样式，使用像 styled-jsx 这样的库。

即使您对使用其中一个不感兴趣，也值得看看 TypeScript + React npm 包的各种模板，看看它们是如何工作的。

【讨论】：

由于 React 项目的包也包含图像，您是否建议使用 Webpack 而不是您的第二个建议？
是的！当然。许多库作者发现 Rollup 在捆绑库方面效果更好一些，但可以选择你最喜欢的任何东西。
Rollup 非常适合组件库。 github.com/Sivakumar00/react-typescript-npm-boilerplate 为带有汇总、故事书的 react-typescript 创建了这个样板