從 node_modules 發布需要 CSS 的 npm 包

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）或直接在瀏覽器中使用它。

到目前為止，我使用 Babel 將我的 ES6 代碼轉換為 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文件，在我們的切入點，包含多個@import為node_modules CSS文件（SASS代碼）的聲明，並使用rule處理該SASS編譯到一個單獨的css文件，但我”已經導致相信該過程與直接的 css 文件基本相同，具有適當的rules和加載程序。 查看css-loader和style-loader的 webpack 文檔以獲取更多信息。

還要記住，如果這些樣式表中的任何一個引用了圖像或字體文件，您將希望加載器也處理提取這些資產。