reactとtypescript npmパッケージにcssファイルを含める方法

Question

私が働く会社で再利用する一連のコンポーネントを作成しています。私たちはtypescriptを使用しています。これまでのところ、コンポーネントを適切に作成し、JavaScriptに変換し、npmに公開することができます。私はコマンドラインtscを使用するだけで、私はwebpackを使用していません。私の問題は、CSSファイルを使用する特定のコンポーネントに依存しています。私は私のNPMパッケージをインストールし、実際のアプリケーションを実行すると、エラーがスローされます：私は私のtranspiledコードのdistのフォルダを見てみると、CSSファイルが存在しない

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

。 私はtsconfig.jsonファイルに「ファイル」を追加しようと、それはそれを追加しますが、正確に同じパス（dist\DataTable.cssの代わりにsrc\DataTable.css）で

はWebPACKのを使用せずに、最終的なパッケージにそのファイルをインクルードする方法はありますか？

Answer 1

このファイルのパスに問題はないと思います。あなたはその.cssファイルの登録に問題があると思います。 BundleConfig.csがありますか？その道にはそこにありますか？

Answer 2

それは、私は通常、NPMへの公開用バージョンを準備するためにgulpまたはgruntのようなツールを使用し

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; 

Answer 3

を試してみてください。他のステップの中には、JavaScriptのタイプコピーをtraspilingし、イメージ、スタイルシート、configsなどの他のリソースをターゲットディレクトリにコピーすることも含まれます。 it is not mandatoryは、これらのツールのいずれかを使用すること

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)); 
}); 

注：

以下はあなたに、前述の2段階のアイデアを与えるためにゴクゴクタスクの大まかな例です。しかし、そのアイデアは変わりません。単純な蒸散以上のことをするには、&ビルドスクリプトを作成しなければなりません。