Fatal编程技术网
  • css/
  • Css 如何在npm包中导出和导入样式？

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

css node.js npm webpack

Css 如何在npm包中导出和导入样式？,css,node.js,npm,webpack,styles,Css,Node.js,Npm,Webpack,Styles,我有一个React组件，我将该组件发布在我用webpack构建的NPM注册表中。在我的主要项目中，我使用了组件npm包JS，如下所示： 从“mycop”导入mycop； 问题是，mycop也有CSS，我在webpack和ExtractTextPlugin的帮助下，将CSS构建到dist/index.CSS（将所有CSS构建到一个文件中） 我想用这样的风格： 导入'mycop/index.css'； 或 导入'myComp/index'； 在mycopnpm包中，我想以支持这种导入方法的方式

我有一个React组件，我将该组件发布在我用webpack构建的NPM注册表中。在我的主要项目中，我使用了组件npm包JS，如下所示：

从“mycop”导入mycop；
问题是，
mycop
也有CSS，我在webpack和
ExtractTextPlugin
的帮助下，将CSS构建到
dist/index.CSS
（将所有CSS构建到一个文件中）

我想用这样的风格：

导入'mycop/index.css'；
或

导入'myComp/index'；
在
mycop
npm包中，我想以支持这种导入方法的方式公开它

注意：我不想直接从
node\u模块导入它


import'../../node_modules/myComp/index.css'；//坏的



谢谢
 所以这比我想象的要简单，你所需要做的就是像那样导入CSS（正如我在问题中所做的）：

并确保您的工具（browserify/webpack等）能够处理将css加载到javascript文件中的问题

因此，这个问题更多地与建筑过程有关



此外，如果您想将特定代码推入npm注册表，可以使用
package.json
中的“文件”。这样，您就可以在npm注册表中获得所需的文件


files: [
"dist/*.css"
]


您还可以使用以下工具：
-布朗塞利
-用于网页包


但是我不喜欢它们。它强制依赖于npm包的使用者。
对于webpack，请执行
npm安装--保存开发css加载程序
。然后在webpack.config.js中，将这一行添加到
use
选项中：
css加载程序
。签出。另外，确保目录未列在
.gitignore
文件中，这会阻止在包中保存所有文件

files: [
"dist/*.css"
]