4

I will be using Semantic-UI-React in my project but I came across following issues:

Docs link : https://react.semantic-ui.com/usage#css

  1. Docs say webpack 1 is supported but not recommended. I am using Create React App which comes with webpack version 1.14.0. So does that mean I should not use Semantic-UI-React with CRA?

  2. For styling, I also want some custom styles in my project , so I went with third option of Semantic UI package mentioned in the docs.. npm install semantic-ui --save-dev runs gulp internally and creates a semantic folder. But there is no dist folder as mentioned in the docs. From which path I should refer the semantic.min.css in my index.js file?

I am basically trying to use Semantic-UI-React with semantic.min.css with some of my own styles on top of it. But it seems I am making some mistake in the setup. Another option may be to go ahead with Semantic UI CSS package ? ...but according to docs I will not be able to use custom styles with this method.

I am a bit confused here , please help :)

FE_Addict
  • 647
  • 2
  • 11
  • 21

1 Answers1

8

The SUI-React docs comment about not recommending use of Webpack 1 is simply because it's not the latest version of Webpack. Webpack 1 still works fine in general. Also, the current version of Create-React-App (1.0) uses Webpack 2, and if you haven't "ejected" your CRA project, you can easily upgrade the react-scripts dependency to use the latest version.

If you want to build a custom Semantic-UI CSS file, yes, you would install the semantic-ui package, and that will create a semantic folder containing Semantic-UI's LESS source files and build system. From there, you would make any edits to SUI's source for your customization. Once you've made your edits, run gulp build inside that semantic folder, and it will create a semantic/dist folder containing the compiled CSS files (per the instructions at https://semantic-ui.com/introduction/build-tools.html ). Finally, you would copy the generated CSS files into your project, probably inside the src folder, and import those in your JS source.

If you don't care about generating a customized Semantic-UI CSS build, you can npm install --save semantic-ui-css, which has a pre-built version of the default Semantic-UI theme, and import the CSS from there.

For what it's worth, my own "Practical Redux" tutorial series uses Semantic-UI-React and the semantic-ui-css package, and I show how to add semantic-ui-css in Practical Redux, Part 4: UI Layout and Project Structure. (I've also used a custom Semantic-UI CSS build in my "real" project at work.)

markerikson
  • 63,178
  • 10
  • 141
  • 157
  • Thanks a lot for this answer and your "Practical Redux" tutorial is amazing too ! What is your feedback towards the performance of semantic-ui-react and semantic-ui ? I have read few posts where they mentioned about webpack build being too huge in size. Has it caused any trouble for you so far in terms of size? – FE_Addict Jun 15 '17 at 14:08
  • To be honest, the particular app I'm working on is still in the prototype stages, and we haven't dealt with bundle size optimization yet. I will say that both SUI and SUI-React do seem a bit large, so they're probably not the best choice if you're trying to create a highly optimized bundle, but they do provide a lot of functionality and a good basic appearance out of the box. – markerikson Jun 16 '17 at 04:31
  • I am also in a very initial stage of my project, so probably I will look for some other option if size is an issue here..I really liked antd library but a part of their documentation is still untranslated. React bootstrap looks like an option as well . What do you think of React bootstrap and antd? – FE_Addict Jun 16 '17 at 06:39
  • Haven't seriously looked at or investigated either of them. – markerikson Jun 17 '17 at 03:36