How to use Semantic-UI-React with Webpack 4

This article is about how to use semantic-ui with webpack 4 in your reactjs project. I am going to try as much as I can to make this article simple and straight to the point.

Semantic-ui is a css framework that has a reactjs port called React Semantic UI. The reactjs port allows you to write JSX while using the semantic ui css.

This tutorial assumes that you have a working knowledge of webpack 4/reactjs and that you already have a standing webpack 4/ reactjs project waiting to be integrated with semantic-ui.

Let’s get to it:

Step 1:

First you need to install the needed modules by running the following codes in your shell.

• Run Semantic-UI

This will prompt an interactive installer that will ask you questions like where to put your semantic-ui source codes and all. Feel free to answer this questions as it suits you

• Install semantic-ui-react by running the following code

NOTE:Semantic-ui is the CSS to be used by semantic-ui-react because semantic-ui-react is just a port of semantic-ui , it still needs its css

Semantic-ui-less is needed for the theming functionality of semantic-ui.

Step 2:

Now that we have installed all of what we need in semantic. We need to install some plugins to be used in webpack 4. You can omit any of these plugins if you already have them installed.

You should have at least two of these plugins installed already, if not all.

Step 3:

Install Less globally in your machine, if you haven't. There is a clause to this, though.

The present version of less conflicts with the present version of semantic-ui-react, so we might have to go back a bit. I wish it wasn't this way, but downgrading back to version 2.7.3 was the only way I was able to make it work.

So , if you have the latest version installed, you might have to downgrade it to 2.7.3.

Run the code below to install the compatible Less version. Run the second line only if you don't have Less installed before.

Step 4:

Now, let’s head over to webpack. I will assume , you have webpack 4 installed already with working configurations in your webpack.config.js. This part is a little trickish, because everybody’s webpack config is sort of written differently. Nevertheless, follow the following procedures to tweak your configurations:

• You have to update the types of file that your webpack handles because of the different files that might be involved in the usage of react semantic ui.
• Add the below regex to the test key of whatever plugin is handling your image files.

You can see how I added my own below.

The above is just an excerpt of my webpack configuration file

Add the following font-specific configurations to handle loading of font files

Now, let’s sort out the css , this side of the whole process is very important. Check the codes below and use it to update your webpack config.

What is most important in the picture above is the order of the loaders and the configurations of less-loader. If you have options already configured for the other loaders , you can leave it but don't forget to add the options for less-loader as shown above.

As you can see, from bottom to top, the loaders are in the following order , less-loader -> Postcss-loader -> css-loader -> style-loader. Deviating from this order might lead to misinterpration of the css codes.

Note: If you noticed, there is no SASS support. Adding Sass Loader to the whole thing might actually mess the webpack compilation up. SASS and LESS seems to conflict each other when you use them with webpack. So you might have to comment out all SASS configurations on your webpack.config.js until later . It is more or less a trade off.

Now we need to update the resolve section of your webpack config , jsut press Ctrl+f and press resolve , you should find it. Here is my own resolve.

All you need to do here is to add '.less' and '.css' to your extensions list if they were not present.

Now that we are done with all this, you are ready to use react-semantic-ui in your project as shown below.

After this is done, you then add <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"/>/ to the `<head>` of your index.html file. I mean the file that your webpack builds on , it is usually located in the src folder.

Here is an example of such file:

Originally published at gist.github.com.