Include CSS files in tsc TypeScript compilation

Question

I am trying to create a React TypeScript NPM package. I have finished my code and created package.json and tsconfig.json. But inside my package I also have a bunch of CSS files that I want to include in my package. This is my 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"
  ]
}

My problem is that when I run tsc in my folder, it creates all .js files and all .d.ts files in /dist, but I see no CSS files at all. How do I do to make it include CSS?

tacodave · Accepted Answer · 2020-11-17 17:05:49Z

18

So this is exactly the question I was looking for. Unfortunately for us both I found our answer in this post https://vccolombo.github.io/blog/tsc-how-to-copy-non-typescript-files-when-building/

Basically what it said was that tsc does not do anything other than turn TS code into JS code and there are no plans to change this in the future.

answered Nov 17, 2020 at 17:05

tacodave

1811 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Justin D. Harris Over a year ago

TL;DR: After the build, copy the files to the build directly using custom commands or the copyfiles package.

Zei Over a year ago

Basically just install rimraf and copyfiles. Make sure to add "rootDir": "src" and "outDir": "dist" to your tsconfig. Then add

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

these to your package.json. Running npm run build will build the typescript into the dist directory and copy html and css files to your dist directory in the same structure as the src directory. It works perfectly fine. Just make sure to add any other extensions to that copy command like src/**/*.ttf in my case.

Aniruddha Over a year ago

@Zei Could you please expand on your comment and add it as an answer?

Zei Over a year ago

@FrankenCode I was just describing the instructions in the link in the answer. Sorry but my implementation is a bit specific. I created a program that watches my project directory for changes and runs different logic depending on the file type/action. I also made a VS Code extension to support a smoother editor experience when it's auto compiling changes. It's sitting in a private repository right now so I can't share it. But the good news is you don't need all that. If you don't mind running npm run build manually each time you want to compile your code, you shouldn't have a problem.

GreenAsJade · Accepted Answer · 2022-07-20 23:09:31Z

-5

Add this to your tsconfig.json:

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

More information can be gotten here https://www.npmjs.com/package/typescript-plugin-css-modules.

edited Jul 20, 2022 at 23:09

GreenAsJade

14.7k11 gold badges68 silver badges103 bronze badges

answered Apr 28, 2021 at 15:58

Bisola Adeniyi

411 silver badge1 bronze badge

1 Comment

GreenAsJade Over a year ago

This is getting downvotes because that package offers IDE support, but not packaging support. This question is about packaging support.

Collectives™ on Stack Overflow

Include CSS files in tsc TypeScript compilation

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related