Theming Semantic UI with LESS@4 and Webpack@5

Theming Semantic UI with LESS@4 and Webpack@5

Theming Semantic UI with LESS@4 and Webpack@5

Introduction

Are you using Semantic UI and think the styles are a good foundation but you would like to customize them without adding a lot of new styles to your codebase? That's what happened to us, and because we don't use create-react-app to scaffold our projects, their main guide wasn't useful for us. Neither was the medium post they link on how to set it up with webpack, since that post is a bit old, but it was very helpful on how to sort this out!

The main idea behind what we are trying to accomplish here is to have an easy way to override Semantic UI variables to avoid adding new styles to our codebase.

Let's get to it

Install dependencies

First, we need to install some dependencies:

$ npm install --save-dev css-loader style-loader less less-loader @neocoast/semantic-ui-less

You may notice that instead of installing the original semantic-ui-less repository we have installed NeoCoast's fork. That's because the original repository doesn't work well with less@4 (as far as we were able to debug), so we needed to update some styles.

Configure Webpack loaders

Now that we've installed the necessary dependencies we need to set up our webpack loader so we can use all the provided .less code from Semantic UI.

First, we need to add a rule on how to handle .less files:

{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'less-loader',
options: {
lessOptions: {
sourceMap: true
},
},
},
],
}

We also need to add a rule on how to handle different font files:

{
test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/i,
use: [
'file-loader',
],
}

Create the folder structure for the Semantic UI override

In order to accomplish this, we need to create a new semantic-ui folder on the src folder of our project with a theme.config file inside and a site folder as well:

$ mkdir src/semantic-ui && mkdir src/semantic-ui/site && touch src/semantic-ui/theme.config

Now, you need to copy all the files inside the _site folder of the repository inside your newly created src/semantic-ui/site folder and copy the contents of the theme.config.example file to yours and change the folders and theme part to:

/*******************************
Folders
*******************************/
/* Path to theme packages */
@themesfolder : 'themes';
/* Path to site override folder */
@sitefolder : '../../../src/semantic-ui/site';
/*******************************
Import Theme
*******************************/
@import (multiple) "@neocoast/semantic-ui-less/theme.less";
@fontpath : "../../../themes/@{theme}/assets/fonts";

Update the webpack aliases

Almost done! We need to add two aliases to our webpack configuration:

"../../theme.config$": path.join(__dirname, "../semantic-ui/theme.config"),

Import the styles!

Last but not least, import the main .less file in the entry point of your application:

import '@neocoast/semantic-ui-less/semantic.less';

And we are done! Now you can easily override/change the variables of Semantic UI without creating a ton of new styles!