How to Include a css file in react and typescript npm package

Question

I am creating a series of components to be reused in the company I work for. We use typescript and so far I can create the components properly, transpile to javascript, and publish to npm. I only use the command line tsc, I am not using webpack. My problem relies in a specific component that uses a css file. When I run the actual app that installs my npm package, it throws an error:

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

When I look at the dist folder of my transpiled code, the css file is not there. I tried adding 'files' to the tsconfig.json file and it does add it, but with the exact same path (src\DataTable.css in stead of dist\DataTable.css)

Is there a way to include that file in the final package without using webpack?

Allfired

Answer 1

Basically, tsc is designed to compile .ts / .tsx files and does not currently handle other file types such as .css. This is a known issue and is tracked here.

To get around the problem, you need to have tsc compile all of your TypeScript files and then copy over any non-TypeScript files. Víctor Colombo has a great guide to copying over .css files here. The two steps are listed below:

First, install two dev dependencies that will help with copying overfil

npm install --save-dev rimraf copyfiles

Then, update your "scripts" in package.json to implement the copying process for non-TypeScript files when the package is built:

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

Note: This solution assumes you are using npm although you can just as easily swap in yarn as your package manager. It also assumes that distribution files are stored in a dist folder. You can check if the solution is working by running npm run build and checking for the .css files under dist.

Salver

Answer 2

I think that you don't have problem with path of this file. I think that you have problem with register of that .css file. Have you got a BundleConfig.cs ? It is there with their path?

Lowering

no, I have no config for bundling, as there is actually no bundling done. All files are transpiled to js but not bundled together – Allfired

Answer 3

There's a very smart solution for that using a package that employs the tsc hooks: https://github.com/swimauger/tsc-hooks

It's enough to install it first:

npm install --save-dev tsc-hooks

And then add these lines to your tsconfig.json:

{
  ...
  "hooks": ["copy-files"],
  "include": ["src/**/*.tsx", "src/**/*.ts", "src/**/*.css"],
  "exclude": ["src/**/*.txt"] /* if you wish to exclude any files */
}

Ermina

Answer 4

I usually use tools like gulp or grunt to prepare version for the publishing to npm. Among other steps this includes traspiling typescript to javascript and copying other resources like images, stylesheets, configs to the target directory.

Below is an rough example of gulp tasks to give you an idea of the aforementioned two steps:

gulp.task('copy.assets', () => 
{
    return gulp.src(["./**/*", '!./**/*.ts', '!./**/*.tsx', '!./**/*.scss'])
            .pipe(gulp.dest(TARGET_FOLDER));
});  

gulp.task('build.js', () => 
{
    var tsProject = ts.createProject('tsconfig.json', {
        typescript: require('typescript')
    });

    var tsResult = tsProject.src()
        .pipe(tsProject()); 

    return tsResult.js
            .pipe(gulp.dest(TARGET_FOLDER));
});

Note that it is not mandatory to use any of those tools. But the idea is still the same - you will have to create your build&deploy scripts in order to do something beyond simple transpilation.

Deepsix

Answer 5

it try

 import React from 'react';
    import s from './Button.css';

    function Button() {
      return (
        <button className={s.btn}><i className={s.icon} />Click Me</button>
      );
    }

    export default Button;

Schooner

This is completely 100% random, and unrelatable. – Domeniga