Question

我正在尝试发布到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）或直接在浏览器中使用它。

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

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

Answer 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文件中，但是我一直认为该过程与使用适当的rules和加载程序的纯CSS文件基本相同。有关更多信息，请查看css-loader和style-loader的webpack文档。

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

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

1 个答案: