添加样式到 TypeScript，反应 NPM package

Question

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

使用 NPM package 中的组件会导致错误： 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 package，其中包含所有样式和组件。

Answer 1

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

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

或者，您也可以在 TypeScript 中编写您的 styles ，使用styled-jsx 之类的库。

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

• https://github.com/pankod/react-typescript-npm-package-boilerplate
• https://github.com/dstpierre/react-npm-typescript-boilerplate