如何在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等..）可以处理将css加载到您的javascript文件中。

因此问题与构建过程更相关。

此外，如果您想将特定代码推送到npm注册表，您可以使用＆＃34;文件＆＃34;在package.json内。这样，您最终只会获得npm注册表中所需的文件。

files: [
"dist/*.css"
]

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

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