css - 如何在 react 和 typescript npm 包中包含 css 文件

Question

我正在创建一系列组件，以便在我工作的公司中重复使用。我们使用 typescript，到目前为止，我可以正确地创建组件，转换为 javascript，并发布到 npm。我只使用命令行 tsc，我没有使用 webpack。我的问题依赖于使用 css 文件的特定组件。当我运行安装我的 npm 包的实际应用程序时，它会抛出一个错误:


./~/my-common-components/dist/DataTable.js
找不到模块:无法解析 '.\AdminPortal\admin-portal\node_modules\common-components\dist' 中的 './DataTable.css'


当我查看我的转译代码的 dist 文件夹时，css 文件不在那里。我尝试将"file"添加到 tsconfig.json 文件中，它确实添加了它，但路径完全相同(src\DataTable.css 而不是 dist\DataTable.css)

有没有办法在不使用 webpack 的情况下将该文件包含在最终包中？

Answer 1

基本上，tsc 旨在编译 .ts/.tsx 文件，目前不处理其他文件类型，例如 .css。这是一个已知问题，已跟踪 here .

要解决此问题，您需要让 tsc 编译所有 TypeScript 文件，然后复制任何非 TypeScript 文件。 Víctor Colombo 有一个关于复制 .css 文件的好指南 here .下面列出了这两个步骤:

首先，安装两个有助于复制overfil的开发依赖

npm install --save-dev rimraf copyfiles

然后，更新 package.json 中的“脚本”以在构建包时实现非 TypeScript 文件的复制过程:

"scripts": {
    "clean": "rimraf dist/",
    "copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css dist/",
    "build": "yarn clean && tsc && yarn copy-files"
}, 

注意:此解决方案假设您正在使用 npm，尽管您可以像包管理器一样轻松地交换 yarn。它还假定分发文件存储在 dist 文件夹中。您可以通过运行 npm run build 并检查 dist 下的 .css 文件来检查解决方案是否有效。