React+Webpack+Semantic UI and how to do theming

Semantic UI is a great UI framework which can make your UI development much easier, but it’s still not a joyful job to make it work with webpack especially for theming.

Use Semantic-UI without theming

If you just want to use Semantic-UI with your Webpack-React project, it’s quite easy.

You only need to follow two steps:

  • npm install semantic-ui-react --save (see semantic-ui-react)
  • Since the semantic-ui-react does not include style, you can use the default Semantic UI stylesheet by including a Semantic UI CDN link in your index.html file.

Just create a simple button in your code to test if it is working:

Instead of using a Semantic UI CDN link, you can manually handle the CSS by yourself, just:

  • npm install semantic-ui-CSS --save
  • In your entry file, include the entry file:

Remember to turn off the “CSS-Module” functionality for .css file. And notice that both using CDN or semantic-ui-css do not provide the theming feature.

Theming

Notice: the content bellow does not work for Webpack2, I tried to adjust the configs, but still failed to make the plugin less-plugin-rewrite-import work, you can experiment with my existing project demo-semantic-ui-theming-with-webpack2

To be able to use the theming feature, you need to use semantic-ui-less. It’s a pure less part of Semantic UI aiming to help you get rid of all the unnecessary dependencies from Semantic-UI.

And since it’s Less, and there are also Icon Fonts involved in this module, make sure your webpack can handle them well:

Before we start the work, let’s take a look at the project structure (you can check out the demo project):

rewrite less import for ../../theme.config

semantic-ui-less tries to import a file that does not exist( node_modules/semantic-ui-less/theme.config ), this file includes some key variables used throughout the whole module.

So first of all, you need to create a theme.config by yourself ( create a directory named semantic-ui in your project root):

And copy the content of node_modules/semantic-ui-less/theme.config.example into theme.config and remember to do a import path fix, change @import "theme.less" to @import "~semantic-ui-less/theme.less":

Also don’t forget to change the @siteFolder to your folder:

After that, we can use a Less plugin to make the ../../theme.config refer to our own theme.config. Let’s intall the module first:

Then add the configuration to webpack.config.js:

You can now import the main entry of semantic-ui-less from /app/index.js:

Anyway, you will still get build error complaining about that it can’t find font files.

Fix @fontPath error

What you need to do is just add one line of code showed bellow at the bottom of your theme.config ( make sure it’s bellow the line that imports theme.less ):

Now the build process should work like a charm.

Setup customization for your site

Create extra structure for your semantic-ui directory:

Most of custom style code goes into site/ folder, the structure will be like this:

To verify whether the customisation is working, just create /app/semantic-ui/site/elements/button.variables and change background color for all buttons:

Put a button into your page /app/index.ejs to see if it works:

Yellow Button

If you see the same, it works.

References:

18 Comments

  1. Everything works great. But on last step, I dont see any effects. I checked and my site folder is not getting executed.

  2. Fixed it.
    In theme.config, I changed path of my site folder to (its relative from the module)
    @siteFolder : ‘../../semantic-ui/site’;

  3. Hey @neekey, I don’t suppose you have this working with Webpack 2? I have tried but for the life of me haven’t been able to get the rewrite import plugin working.

  4. Even if I added the reweriteImportPlugin, I still have the same error!

    ERROR in ./~/css-loader!./~/less-loader/lib/loader.js!./~/semantic-ui-less/semantic.less
    Module build failed: Cannot resolve ‘file’ or ‘directory’ ../../theme.config in /Users/jharvey/Serdy/www/fe-refonte/fe-client/node_modules/semantic-ui-less/definitions/modules
    @ /Users/jharvey/Serdy/www/fe-refonte/fe-client/node_modules/semantic-ui-less/definitions/modules/transition.less (line 19, column 0)
    near lines:

    @import (multiple) ‘../../theme.config’;

    @ ./~/semantic-ui-less/semantic.less 4:14-94 13:2-17:4 14:20-100

  5. Wow! Helped me lot to get this working. Thank you very much for this post.

    One little note: The RewriteImportPlugin does not work with less-loader >= 4.0.0. Downgraded for now to 2.2.3 to get it working.

  6. Ok, i fixed it by skipping that plugin and just using a postinstall in my package.json of

    “postinstall”: “node font-fix.js && cp ./src/app/styles/semantic-ui/theme.config ./node_modules/semantic-ui-less/theme.config”

    1. Yes, Ian, you can always do that, but the reason I wrote this post was that I wanted to get a more elegant way to achieve this, but as soon as it works for you, it’s good : )

Leave a Comment

Your email address will not be published. Required fields are marked *