NeoCoast
Published in

NeoCoast

Theming Semantic UI with LESS@4 and Webpack@5

Introduction

Let’s get to it

Install dependencies

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

Configure Webpack loaders

{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'less-loader',
options: {
lessOptions: {
sourceMap: true
},
},
},
],
}
{
test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/i,
use: [
'file-loader',
],
}

Create the folder structure for the Semantic UI override

$ mkdir src/semantic-ui && mkdir src/semantic-ui/site && touch src/semantic-ui/theme.config
/*******************************
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

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

Import the styles!

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store