如何在npm包中导出和导入样式？

Question

我有一个反应组件，我发布了使用webpack构建的NPM注册表中的组件。在我的主要项目中，我消耗这样的组件NPM包JS：

Import myComp from 'myComp'; 

的问题是，myComp也有CSS，我建成dist/index.css用的WebPack和ExtractTextPlugin的帮助（这建立所有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等。 ）可以将loding css处理到你的javascript文件中。

所以这个问题更多的与建筑过程有关。

---

另外，如果你想要把特定的代码到你可以使用“文件”里面的package.json NPM注册表。这样你最终只需要在npm注册表中需要的文件。

files: [ 
"dist/*.css" 
] 

你也可以使用工具，如： https://github.com/rotundasoftware/parcelify - 为browserify https://www.npmjs.com/package/parcelify-loader - 为的WebPack

，但我不喜欢他们。它强制依赖于你的npm包的消费者。