Because there are a lot of icons & images, you must make sure that your webpack configuration know’s how to bundle them. An example configuration that you should follow if you don’t have anything set up, would be the following:

...

module: {

rules: [

...



// this rule handles images

{

test: /\.jpe?g$|\.gif$|\.ico$|\.png$|\.svg$/,

use: 'file-loader?name=[name].[ext]?[hash]'

},



// the following 3 rules handle font extraction

{

test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,

loader: 'url-loader?limit=10000&mimetype=application/font-woff'

},



{

test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,

loader: 'file-loader'

}, {

test: /\.otf(\?.*)?$/,

use: 'file-loader?name=/fonts/[name]. [ext]&mimetype=application/font-otf'

}

]

}

Which would of course depend on the url-loader and file-loader loaders of Webpack. If you don’t have them listed on your dependencies you can easily add them by entering the following:

npm install --save-dev file-loader url-loader

Creating a theme folder

The next step would be to create a folder for our theme. Within your project root, in the same level where the node_modules directory is located, create a folder and name it my-semantic-theme or whatever name you want. Inside it create a file and specifically name it theme.config ( this is NOT a .js file!). In addition, create a folder (direcly inside my-semantic-theme) and name it site. Your project will look something like that

...

node_modules/

my-semantic-theme/

site/

theme.config

In order for our theme to extend the default theme of Semantic UI we need to (unfortunately) copy and paste the contents of the default theme configuration located in node_modules/semantic-ui-less/theme.config.example. Simply open it, copy everything and paste it into our newly created theme.config file. After that we have to make 3 big changes at the very bottom of the file.

Change @import "theme.less"; to @import "~semantic-ui-less/theme.less"; Change @siteFolder : "site"; to @siteFolder : "../../my-semantic-theme/site"; replacing “my-semantic-theme” with the name of your folder. Add @fontPath : "../../../themes/@{theme}/assets/fonts"; at the very end of theme.config (as the last line)

What we accomplished here, is to map the Semantic-UI assets to the ones we have created. The first change makes sure that we import the correct theme.less file from the node_modules. The second change makes sure that the siteFolder variable points to our site folder, with the starting directory being /node_modules/semantic-ui-less/ (hence the relative path). The third change makes sure that Semantic-UI can find the fonts that already exist in the themes.

The final step that we have to solve ( and that was actually the hardest to locate) is telling Semantic UI to use our theme.config file when building the .css files. Because semantic-ui-less was not built to be easily extendable it always searches for the theme.config file within its root package directory using a relative path. What we must do it tell webpack “Hey, when someone requests a relative path to theme.config, map it directly to the theme.config that we just created”. To do that we must add an alias. In a Webpack 2 configuration , supposing that your webpack configuration file is in the same level as the my-semantic-theme directory, that would look like that:

// at the top of the webpack config file

const path = require('path'); module.exports = {

entry: ...,

output: {

...

},

resolve: {

alias: {

'../../theme.config$': path.join(__dirname, 'my-semantic-theme/theme.config')

}

},

module: {

...

}

}

That tells webpack to resolve all the “../../theme.config” import calls to our specific theme.config file.

That’s it. Now within the site folder that we created, you can create all the folders that a normal theme has. That means your site folder will most likely contain the following folders.

site/

assets/

collections/

elements/

globals/

modules/

views/

Just visit the official repo to see how you can change all the variables you might want. Since we are extending the default theme, you only need to add the variables you want to change. All the rest will keep their default values.

In order for the changes to be bundled, you have to — of course — import the semantic UI .less library somewhere within your webpack entry point. So if your entry point is app.js, then simply add the following line at the top of your file:

import "semantic-ui-less/semantic.less"; // ES6 or require("semantic-ui-less/semantic.less") // CommonJS

Running webpack will result into the proper CSS files that you wanted based on your theme. You can test that by changing a variable value like the default background color of the buttons .