Semantic UI setup with Webpack 4

Help Requests
1

I use Semantic UI in my application. I manage to add the Semantic UI CSS by adding
@import "./vendor/semantic.min.css";
in my app.css file.
I need to use some Semantic UI components which require Semantic UI js files (including jQuery).
I added jQuery in webpack.config.js file but how to I add the semantic.js?
Has anybody included Semantic UI in webpack 4?
What is the best/easiest option?
Thanks.

2

Npm i semantic-ui --save

// Boot.ts
Import “semantic-ui”;

I might be wrong with the names but in principal this is how you do it

3

Nah, semantic-ui is an absolute horror to integrate with webpack. They have an auto-invoked gulp build script that runs (and fails) on installing the package.

The only way to get the full thing in your project is by cloning semantic-ui to a separate folder, running their initialization script, and copying the output of that into your project.

It’s a wonderful UI framework but their idea of installing is like going 10 years back in time, so I went with the semantic-ui-less package for a while and program the javascript behaviors myself. This is super easy to do in Aurelia anyway.

The less package still takes about 60 lines of custom webpack loader code to get all those configs and variables fixed up. Since I’m not a huge fan of LESS anyway, lately I’m just including the minified css in my index.html from cdnjs. It’s not ideal, but it’s been working fine for me.

I just hope Semantic-UI team stops being so stubborn about their installation scripts, which im sure were a wonderful thing at some point in the past.

FYI, for scripting the JS I just look at their JS source files and copy the bits I need. It takes a few minutes to decipher which parts are necessary, and when you’ve identified the 3-4 lines of code (out of the 50) that actually do something, copy them to your custom element and done :slight_smile:

4

I tried npm install but that is not working as @fkleuver already mentioned.
@fkleuver Looking at JS source files and replicate that functionality in Aurelia is a good idea. I will try that. In this case I don’t need neither their js file nor jQuery. Currently I only use CSS as you do.
Thanks for that.