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

Question

我有一个react组件，我在NPM注册表中发布了我使用webpack构建的组件。在我的主项目中，我使用了组件npm包JS：

Import myComp from 'myComp';

问题是myComp也有CSS，我在webpack和ExtractTextPlugin（将所有css构建到一个文件中）的帮助下构建到dist/index.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等..）可以处理加载到您的JavaScript文件中的CSS。

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

---

此外，如果您想将特定代码推送到npm注册表，您可以使用package.json中的“文件”。这样你最终只会得到你在npm注册表中需要的文件。

files: [
"dist/*.css"
]

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

但我不喜欢他们。它强制依赖你的npm包的使用者。