使用React組件分發CSS
[英]Distribute CSS with a React component
問題描述
我有一個React組件index.js ，它在style.css中有樣式。
我想在npm上發布這個組件，但我很困惑我如何讓其他開發人員輕松使用樣式。
我看到有三種選擇：
- 使用
require('./style.css')並依賴具有捆綁解決方案的用戶（例如webpack，rollup）。 我不喜歡這個解決方案，因為它迫使用戶沿着某個路線使用我的組件。 - 讓用戶使用
<link rel="stylesheet" href="node_modules/package/style.css" />導入樣式。 我不喜歡這個解決方案，因為這意味着我的用戶必須對他們的HTML進行更改，而不是僅僅將React組件包含在他們想要的地方。 - 使用react-jss等插件將CSS放入組件本身。 這對我來說不是一個可行的解決方案，因為我有大量的SCSS文件構成了我的組件的樣式。
這些解決方案都不能滿足我的需求，並且使用我的組件非常尷尬。 如何分發組件以便人們可以輕松使用它？
3 個解決方案
解決方案1
8 已采納 2017-02-16 15:41:54
讓用戶選擇如何在他們的應用中包含該文件。 我建議添加到您的README.md ：
別忘了包含CSS文件！
將ES6與Webpack等模塊捆綁器一起使用：
import 'package/dist/style.css';或者，在普通的可靠HTML中：
<!DOCTYPE HTML> <html> <head> ... <link href="node_modules/package/dist/style.css" rel="stylesheet" /> ... </head> ... </html>您也可以使用自己的風格。
這是大多數軟件包采用的方法：
解決方案2
1 2017-02-19 00:57:00
要從GG的答案擴展，高級版本將添加css文件的js版本。
因為這
import 'package/dist/style.css';
要求用戶將Webpack配置為加載css，這可能不是這種情況。 例如，我很少這樣做，因為我使用css-in-js工具來滿足我的樣式需求。
相反，如果你將css文件包裝成這樣的東西：
package/dist/style.js
var insertCss = require('insert-css'); // https://github.com/substack/insert-css
// inline the whole style.css here
insertCss(".YourComponent { color: blue }");
那么用戶就可以做到
import 'package/dist/style';
它將始終與任何模塊加載器（Webpack，Browserify，Rollup ...）一起工作，無論其配置如何。
解決方案3
0 2017-02-16 15:42:18
我建議在npm上包含css文件，並記錄這些替代方案。
- 那些喜歡使用css作為css的人可以復制樣式表
- 那些喜歡使用構建工具的人可以滿足要求
我可以分發使用redux的React組件嗎？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.