在tsc TypeScript编译中包含CSS文件

Question

我想创建一个React TypeScript NPM包。 我已经完成了我的代码并创建了package.json和tsconfig.json。 但是在我的包内，我还有一堆CSS文件需要包含在其中。这是我的tsconfig.json：

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "removeComments": true,
    "declaration": true,
    "jsx": "react",
    "lib": [ "es2015", "dom" ],
    "sourceMap": false
  },
  "files": [
    "src/index.tsx"
  ],
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

我的问题是当我在文件夹中运行tsc时，它会创建所有的.js文件和所有.d.ts文件在/dist中，但是我没有看到任何CSS文件。 我该如何做才能包含CSS？

- BluePrint

Answer 1

这正是我在寻找的问题。不幸的是，我在这篇文章中找到了我们的答案：https://vccolombo.github.io/blog/tsc-how-to-copy-non-typescript-files-when-building/

基本上它所说的是tsc除了将TS代码转换为JS代码之外，并不会做任何其他事情，并且未来也没有计划改变这一点。

- tacodave

---

简而言之：构建完成后，使用自定义命令或copyfiles包将文件复制到构建目录。 - Justin Harris

基本上只需安装rimraf和copyfiles。确保在tsconfig中添加"rootDir": "src"和"outDir": "dist"。然后将以下内容添加到package.json中的"scripts"部分："clean": "rimraf dist/", "copy": "copyfiles -u 1 src/**/*.html src/**/*.css dist/", "build": "npm run clean && tsc && npm run copy"运行npm run build将会将TypeScript编译到dist目录，并将html和css文件以与src目录相同的结构复制到dist目录中。它完全正常工作。只需确保在copy命令中添加任何其他扩展名，例如src/**/*.ttf（以我的情况为例）。 - undefined

Answer 2

将以下内容添加到您的tsconfig.json文件中：

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

更多信息可以在此处获取：https://www.npmjs.com/package/typescript-plugin-css-modules。

- Bisola Adeniyi

---

这个问题被踩是因为那个软件包提供了IDE支持，但没有提供打包支持。而这个问题是关于打包支持的。 - GreenAsJade