如何在React和TypeScript NPM包中包含CSS文件

Question

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

./~/my-common-components/dist/DataTable.js Module not found: Can't resolve './DataTable.css' in '.\AdminPortal\admin-portal\node_modules\common-components\dist'

当我查看已编译代码的dist文件夹时，css文件不存在。我尝试将“文件”添加到tsconfig.json文件中，但确实添加了文件，但路径完全相同（src\DataTable.css而不是dist\DataTable.css）

有没有一种方法可以在不使用webpack的情况下将文件包含在最终软件包中？

Answer 1

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

\n

为了解决这个问题，您需要编译tsc所有 TypeScript 文件，然后复制所有非 TypeScript 文件。V\xc3\xadctor Colombo在此处.css提供了有关复制文件的出色指南。下面列出了这两个步骤：

\n

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

\n

npm install --save-dev rimraf copyfiles\n

\n

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

\n

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

\n

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

\n