Adding styling to TypeScript, React NPM package

Question

I have a TypeScript(TS), React project which I'm using to hold all my React components. I'm creating an NPM package out of this project which I'm then consuming in separate React projects. I'm running into a problem where I don't know how to export the styling along with the TS components.

Using components from the NPM package result in errors: Module not found: Can't resolve '../css/footer.css'

When I create my directory for packaging(dist) all my components are there but none of the CSS. I'm running tsc to create this directory. All my components and CSS lie within the same src folder.

Here is my tsconfig.json file:

{
  "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"
  ]
}

Do I need to move my styling out of css files and into ts files that make use of the <style jsx> tag or is there another 'better' way of achieving the desired result. The desired result being an NPM package that contains all styling and components rolled into one.

Dan Prince · Accepted Answer · 2020-07-02 22:21:15Z

2

tsc is the command for compiling TypeScript files to Javascript. CSS files are not Typescript files which is why they aren't included in the compilation.

If you want to import CSS (or any other asset types) and output it alongside your other compiled files then you'll probably want to use a bundler like Webpack or Rollup. There are even tools like Microbundle which provide sensible bundler configuration so that you can focus on writing your library.

Alternatively, you could write your styles in TypeScript too, with a library like styled-jsx.

Even if you're not interested in using one, it's worth taking a look at the various templates for TypeScript + React npm packages to see how they work.

edited Jul 2, 2020 at 22:21

answered Jul 2, 2020 at 22:15

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

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

3 Comments

Damian Jacobs Over a year ago

As the package React project also contains images would you advise making use of Webpack over your second suggestion?

Dan Prince Over a year ago

Yeah! For sure. Lots of library authors find that Rollup works a bit better for bundling libraries, but go with whatever you are most comfortable with.

Sivakumar A Over a year ago

Rollup works good and best for component libraries. github.com/Sivakumar00/react-typescript-npm-boilerplate created this boilerplate for react-typescript with rollup, storybook

Collectives™ on Stack Overflow

Adding styling to TypeScript, React NPM package

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related