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

Question

我有一个react组件,我在NPM注册表中发布了我使用webpack构建的组件.在我的主项目中,我使用了组件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文件中.

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

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

files: [
"dist/*.css"
]

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

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