发布需要来自 node_modules 的 CSS 的 npm 包

Posted 2023-03-08

【中文标题】发布需要来自 node_modules 的 CSS 的 npm 包

【英文标题】：Publish an npm package that requires CSS from node_modules

【发布时间】：2017-06-13 18:54:36

【问题描述】：

我尝试发布到 npm 的 React 组件需要来自 node_modules 中我项目依赖项之一的 CSS 样式表。基本上，我的 index.js 文件（将我的组件暴露给外界）看起来像这样：

import Gallery from './containers/GalleryContainer';
require('../../node_modules/jscrollpane/style/jquery.jscrollpane.css');
export default Gallery;

这适用于我的 webpack 驱动的开发环境，因为 webpack 会提取 CSS 文件并将其注入 DOM（使用 css-loader 和 style-loader），但如果我不确定如何将其打包以进行分发.我想将包发布为 ES5，并希望用户能够在 ES6 上下文中（使用 webpack/browserify）或直接在浏览器中使用它。

到目前为止，我使用 Babel 将我的 ES6 代码转换为 ES5 到 prepublish 上的 lib 文件夹中。这需要处理 javascript，而不是它需要的 CSS。

我是否必须指示我的库的用户手动链接 CSS，或者是否有办法让该 require 语句可移植？

【问题讨论】：

您是否希望在您的 npm 包中添加对等依赖项？nodejs.org/en/blog/npm/peer-dependencies

【参考方案1】：

不确定 Babel 是否是这里的一部分，就像将您的 require 更改为 import 一样。您应该能够执行以下操作：

import '../../node_modules/jscrollpane/style/jquery.jscrollpane.css';

然后你必须确保你有合适的 webpack rules 来处理你的 css。在我们的 webpack 过程中，我们实际上 import 一个 SASS 文件，在我们的入口点中，它包含多个用于 node_modules css 文件的 @import（SASS 代码）声明，并使用 rule 将 SASS 编译为单独的 css文件，但我一直相信该过程与直接 css 文件基本相同，具有正确的 rules 和加载程序。查看 css-loader 和 style-loader 的 webpack 文档了解更多信息。

还请记住，如果这些样式表中的任何一个引用图像或字体文件，您将希望加载器也处理提取这些资产。