Css 向TypeScript、React NPM包添加样式

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

使用NPM包中的组件会导致错误： 未找到模块：无法解析“../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文件移到使用

标记的ts文件中，或者是否有其他“更好”的方法来实现所需的结果。

---

所需的结果是一个NPM包，其中包含所有样式和组件，并合并为一个。

tsc

是将TypeScript文件编译为Javascript的命令。CSS文件不是Typescript文件，这就是为什么它们不包括在编译中

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

或者，您也可以用TypeScript编写样式，使用类似的库

即使您不想使用它，也值得一看TypeScript+React npm包的各种模板，看看它们是如何工作的

---

由于软件包React项目也包含图像，您会建议在第二个建议中使用Webpack吗？是的！当然可以许多库作者发现，Rollup对于绑定库来说效果更好，但是可以选择您最喜欢的。