Theming Semantic UI with LESS@4 and Webpack@5

# Theming Semantic UI with LESS@4 and Webpack@5## IntroductionAre 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](https://github.com/facebook/create-react-app) to scaffold our projects, their [main guide](https://react.semantic-ui.com/theming/#theming-with-create-react-app) wasn't useful for us. Neither was the [medium post](https://marekurbanowicz.medium.com/how-to-customize-fomantic-ui-with-less-and-webpack-applicable-to-semantic-ui-too-fbf98a74506c) 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 dependenciesFirst, we need to install some dependencies:```shell$ 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](https://github.com/Semantic-Org/Semantic-UI-LESS) repository we have installed [NeoCoast's fork](https://github.com/neocoast/semantic-ui-less). 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 loadersNow 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:```js{ 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:```js{ test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/i, use: [ 'file-loader', ],}```### Create the folder structure for the Semantic UI overrideIn 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:```sh$ 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](https://medium.com/r?url=https%3A%2F%2Fgithub.com%2FNeoCoast%2FSemantic-UI-LESS) 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:```scss/******************************* 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 aliasesAlmost done! We need to add two aliases to our webpack configuration:```js"../../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:```scssimport '@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!