如何在 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 文件不存在。我尝试将 'files' 添加到 tsconfig.json 文件中，它确实添加了它，但路径完全相同（src\DataTable.css 而不是 dist\DataTable.css）

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

Answer 1

我认为您对该文件的路径没有问题。我认为您对该 .css 文件的注册有疑问。你有 BundleConfig.cs 吗？他们的路径在那里？

Answer 2

试试看

 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

我通常使用 gulp or grunt 之类的工具来准备发布到 npm 的版本。在其他步骤中，这包括将打字稿拖放到 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));
});

请注意 it is not mandatory 使用这些工具中的任何一个。但是想法仍然是一样的——你必须创建你的构建和部署脚本来做一些超出简单转换的事情。

Answer 4

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

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

首先，安装两个有助于复制 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 5

有一个非常聪明的解决方案，使用一个使用 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 */
}

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

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

css

bundle

typescript