如何在 react 和 typescript npm 包中包含 css 文件

Question

我正在创建一系列要在我工作的公司中重复使用的组件。 我们使用打字稿，到目前为止我可以正确创建组件，转换为 javascript，并发布到 npm。 我只使用命令行tsc ，我没有使用 webpack。 我的问题依赖于使用 css 文件的特定组件。 当我运行安装我的 npm 包的实际应用程序时，它会抛出一个错误：

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

当我查看转译代码的 dist 文件夹时，css 文件不存在。 我尝试将“文件”添加到tsconfig.json文件中，它确实添加了它，但使用完全相同的路径（ src\\DataTable.css而不是dist\\DataTable.css ）

有没有办法在不使用 webpack 的情况下将该文件包含在最终包中？

Answer 1

基本上， tsc旨在编译.ts / .tsx文件，目前不处理其他文件类型，例如.css 。 这是一个已知问题并在此处进行跟踪。

为了解决这个问题，你需要让tsc编译你所有的 TypeScript 文件，然后复制任何非 TypeScript 文件。 Víctor Colombo 有一个很好的指南，可以在此处复制.css文件。 下面列出了这两个步骤：

首先，安装两个有助于复制 overfil 的开发依赖项

npm install --save-dev rimraf copyfiles

然后，更新package.json “脚本”以在构建包时实现非 TypeScript 文件的复制过程：

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

注意：此解决方案假设您使用的是npm尽管您可以像包管理器一样轻松地交换yarn 。 它还假设分发文件存储在dist文件夹中。 您可以通过运行npm run build并检查dist下的.css文件来检查解决方案是否有效。

Answer 2

我认为你对这个文件的路径没有问题。 我认为您对该 .css 文件的注册有问题。 你有 BundleConfig.cs 吗？ 有没有跟他们走的路？

Answer 3

使用使用tsc钩子的包有一个非常聪明的解决方案： https : //github.com/swimauger/tsc-hooks

先安装就行了：

npm install --save-dev tsc-hooks

然后将这些行添加到您的tsconfig.json ：

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

Answer 4

我通常使用gulp或grunt 之类的工具来准备发布到 npm 的版本。 在其他步骤中，这包括将 typescript 转换为 javascript 并将其他资源（如图像、样式表、配置）复制到目标目录。

以下是 gulp 任务的粗略示例，可让您了解上述两个步骤：

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

请注意，使用这些工具中的任何一个 都不是强制性的。 但想法还是一样的——你必须创建你的构建和部署脚本才能做一些超越简单转换的事情。

Answer 5

它尝试

 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;