时间戳

首页 > 解决方案 > 为 TypeScript、React NPM 包添加样式

css - 为 TypeScript、React NPM 包添加样式

问题描述

我有一个 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 包。

标签： cssreactjstypescriptnpm

解决方案

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

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

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

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

推荐阅读