添加樣式到 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