如何在npm包中導出和導入樣式？

Question

我有一個反應組件，我發佈了使用webpack構建的NPM註冊表中的組件。在我的主要項目中，我消耗這樣的組件NPM包JS：

Import myComp from 'myComp'; 

的問題是，myComp也有CSS，我建成dist/index.css用的WebPack和ExtractTextPlugin的幫助（這建立所有CSS成一個文件）。

我想消費這樣的風格：

Import 'myComp/index.css'; 

或者

Import 'myComp/index'; 

而且在myComp NPM包我要揭露它，這將支持此導入方法的一種方式。

注：我不想直接從node_modules

Import '../../../node_modules/myComp/index.css'; // bad 

由於導入了！

Answer 1

所以它比我想象的要簡單，所有你需要做的是導入這樣的CSS（如我的問題一樣）：

import 'myComp/dist/style.css'; 

，並確保您的工具（browserify /的WebPack等。 ）可以將loding css處理到你的javascript文件中。

所以這個問題更多的與建築過程有關。

---

另外，如果你想要把特定的代碼到你可以使用「文件」裏面的package.json NPM註冊表。這樣你最終只需要在npm註冊表中需要的文件。

files: [ 
"dist/*.css" 
] 

你也可以使用工具，如： https://github.com/rotundasoftware/parcelify - 爲browserify https://www.npmjs.com/package/parcelify-loader - 爲的WebPack

，但我不喜歡他們。它強制依賴於你的npm包的消費者。