我有一个React组件,并且在用webpack构建的NPM注册表中发布了该组件。在我的主元素中,我消耗了npm组件JS组件,如下所示:

import myComp from 'myComp';
问题是myComp也具有CSS,我借助webpack和dist/index.css(将所有css集成到一个文件中)将其内置到ExtractTextPlugin中。
我想使用这样的样式:
import 'myComp/index.css';
或者
import 'myComp/index';
myComp npm包中,我想以一种支持此导入方法的方式来公开它。
注意:我不想直接从node_modules导入它
import '../../../node_modules/myComp/index.css'; // bad
谢谢!

最佳答案

因此,它比我想象的要容易,您所需要做的就是像这样导入CSS(就像我在问题中所做的那样):

import 'myComp/dist/style.css';

并确保您的工具(browserify/webpack等)可以将CSS加载到您的javascript文件中。

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

另外,如果要将特定的代码推送到npm注册表中,则可以在package.json内使用"file"。这样,您最终只会得到npm注册表中所需的文件。
files: [
"dist/*.css"
]

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

但是我不喜欢他们。它强制依赖于您的npm软件包的使用者。

关于css - 如何在npm包中导出和导入样式?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40368015/

10-11 09:08
查看更多