如何在NPM包中导出和导入样式

Question

我有一个React组件，我在用webpack构建的NPM注册表中发布了这个组件。在我的主要项目中，我像这样使用组件npm包JS:

import myComp from 'myComp';

问题是myComp也有CSS，我在webpack和ExtractTextPlugin的帮助下构建到dist/index.css(它将所有的CSS构建到一个文件中)。

我想要像这样使用样式:

import 'myComp/index.css';

或

import 'myComp/index';

在myComp npm包中，我想以一种支持此导入方法的方式暴露它。

注意:我不想直接从node_modules

导入它

import '../../../node_modules/myComp/index.css'; // bad

谢谢!

Answer 1

这比我想象的要简单，你所需要做的就是像这样导入CSS(就像我在问题中所做的那样):

import 'myComp/dist/style.css';

确保你的工具(browserify/webpack等)可以处理加载css到你的javascript文件

所以这个问题与建筑过程更相关。

---

同样，如果你想把特定的代码推送到npm注册表中，你可以在package.json中使用"files"。这样你就只剩下npm注册表中需要的文件了。

files: [
"dist/*.css"
]

您还可以使用以下工具:https://github.com/rotundasoftware/parcelify -用于browserifyhttps://www.npmjs.com/package/parcelify-loader - for webpack

但是我不喜欢他们。