Question

我正在创建一系列要在我工作的公司中重复使用的组件。我们使用typescript，到目前为止，我可以正确地创建组件，转换为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文件不在那里。我尝试添加＆＃39;文件＆＃39;到tsconfig.json文件并添加它，但路径完全相同（src\DataTable.css代替dist\DataTable.css）

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

Answer 1

基本上，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 并检查 .css 下的 dist 文件来检查解决方案是否有效。

Answer 2

我认为您对此文件的路径没有问题。我认为您在注册该.css文件时遇到问题。你有BundleConfig.cs吗？它与他们的道路在一起吗？

Answer 3

尝试

 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 4

我通常使用gulp或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可以使用其中任何一种工具。但是这个想法仍然是相同的 - 你必须创建你的构建和部署脚本，以便做一些简单的转换之外的事情。

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

4 个答案: