我有一个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/