Fomantic-ui: How to theme it in Webpack project?

[murbanowicz]

Help Wanted

Problem

I am using semantic-ui-react but as we all know the semantic-ui is not in active development, so I want to use Fomantic-UI with the react package.

I have React project using Webpack and I have no idea how I can theme Fomantic in this situation?

[hammy2899]

@murbanowicz

I have used FUI with a few of my react projects and this is how I set it up (including theming support).

$ cd <project directory>
$ npm install --save fomantic-ui

Go through the FUI install CLI and when it asks Where should we put Semantic UI inside your project? input src/assets/fomantic

Once the CLI has finished you should have a new directory src/assets/fomantic which contains all the FUI theming resources. Now you can make your theme inside src/assets/fomantic/src/themes and once your done do the following

$ cd src/assets/fomantic
$ npx gulp build

This should build your theme inside src/assets/fomantic/dist.

Now in your react index.js or equivalent (where you run ReactDOM.render) add the following import

import './assets/fomantic/dist/semantic.css';

You only need to include the CSS import in your entry file NOT in every file you use SUIR components!

Hope this helps 😃

[hammy2899]

Quick note: remember to include the semantic.json file and src/assets/fomantic directory in your git repo, DON'T ignore them.

[murbanowicz]

Not great solution I am afraid.
I would prefer to be able to include LESS files ...

[murbanowicz]

Is it possible for the FUI team to provide replacement for Semantic-UI-LESS to enable to build from less and override quite easily with Webpack and Less loader?

[lubber-de]

Closing this, because it's related (and in my POV solved by the new LESS repo) in #416