在導入CSS語義UI反應的

我將使用語義-UI-反應。在我的項目，但我遇到下面的問題就來了：在導入CSS語義UI反應的

文檔鏈接：https://react.semantic-ui.com/usage#css

文檔說的WebPack 1支持但不推薦。我正在使用隨Webpack版本1.14.0提供的Create React App。那麼這是否意味着我不應該使用Semantic-UI-React與CRA？
對於造型，我也想在我的項目的一些自定義樣式，所以我在這個文檔中提到Semantic UI包的第三個選項內部去.. npm install semantic-ui --save-dev運行gulp，並創建一個semantic文件夾。但是文檔中沒有提到dist文件夾。我應該在哪個路徑中參考我的index.js文件中的semantic.min.css？

我基本上是試圖用Semantic-UI-React與semantic.min.css有一些我自己的在它之上的風格。但似乎我在設置中犯了一些錯誤。另一種選擇可能是繼續使用Semantic UI CSS包嗎？ ...但根據文檔，我將無法使用此方法的自定義樣式。

我有點困惑在這裏，請幫助:)

來源

2017-06-14 FE_Addict

隋反應的有關不建議使用的WebPack 1的文檔註釋很簡單，因爲它不是的WebPack的最新版本。一般而言，Webpack 1仍然正常工作。此外，當前版本的Create-React-App（1.0）使用Webpack 2，如果您尚未「彈出」您的CRA項目，則可以輕鬆升級react-scripts依賴項以使用最新版本。

如果你想構建一個自定義的Semantic-UI CSS文件，那麼你需要安裝semantic-ui包，這將創建一個包含Semantic-UI的LESS源文件和構建系統的semantic文件夾。從那裏開始，您可以對SUI的源代碼進行任何編輯以供您定製。完成編輯後，在semantic文件夾內運行gulp build，它將創建一個包含編譯的CSS文件的文件夾（根據https://semantic-ui.com/introduction/build-tools.html的說明）。最後，你可以將生成的CSS文件複製到你的項目中，可能在src文件夾中，然後將這些文件導入到你的JS源文件中。

如果您不在意生成自定義的語義UI CSS版本，您可以使用npm install --save semantic-ui-css，它具有默認語義UI主題的預構建版本，並從那裏導入CSS。

對於它的價值，我自己"Practical Redux"教程系列採用語義-UI-REACT和semantic-ui-css包，我展示瞭如何在Practical Redux, Part 4: UI Layout and Project Structure添加semantic-ui-css。（我還在我的「真實」項目中使用了一個自定義的Semantic-UI CSS構建）。

來源

2017-06-14 15:52:18 markerikson

非常感謝這個答案，您的「Practical Redux」教程也很棒！你對語義使用反應和語義使用的反饋意見是什麼？我讀過幾篇文章，他們提到webpack構建過於龐大。就尺寸而言，它是否給您帶來了麻煩？ –

說實話，我正在處理的特定應用程序仍處於原型階段，而我們尚未處理捆綁包大小優化。我會說SUI和SUI-React看起來有點大，所以如果你想創建一個高度優化的包，它們可能不是最好的選擇，但是它們確實提供了很多功能和一個很好的基本外觀盒子外面。 – markerikson

我也處於我的項目的初始階段，所以如果size是一個問題，我可能會尋找其他選項..我真的很喜歡antd庫，但他們的文檔的一部分仍然沒有翻譯。 React bootstrap看起來也是一個選項。你如何看待React bootstrap和antd？ –

在導入CSS語義UI反應的

回答

相關問題