Importing CSS in Semantic-UI-React

Question

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 :)

Answer 1

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.)