after searching for a long time, I didn't find any solution that fits to current Semantic UI 2.0.

Question is: How to I remove unused ponents and modules from my JS/CSS build? Im using about 1/4 of all features, is there any easy way to reduce the file size? The way to add/remove items from semantic.json doesn't work anymore it seems.

Thanks, H.G.

after searching for a long time, I didn't find any solution that fits to current Semantic UI 2.0.

Question is: How to I remove unused ponents and modules from my JS/CSS build? Im using about 1/4 of all features, is there any easy way to reduce the file size? The way to add/remove items from semantic.json doesn't work anymore it seems.

Thanks, H.G.

• javascript
• css
• frameworks
• semantic-ui

• Did you like my answer? If yes, please mark as "correct". Thanks! – Windwalker Commented Nov 11, 2015 at 8:45

2 Answers 2

This can be done during Semantic UI's installation process. Have you read Install Semantic UI?

There is depicted that you shall execute

npm install semantic-ui --save

to start the install script.

You will be asked which type of setup you want to run through (Automatic, Express, Custom). If you choose "Custom", you will be prompted which ponents to install Semantic UI with.

Of course, this means you'll have to know beforehand, which ponents you'll make use of, during your development. I chose the way to install Semantic UI pletely, and re-run the installation process again, now stripping down the ponents to install, once the project is ready for release.

Kind regards, Sascha.

Here is how to customize the ponents:

• Edit the semantic.json file to fine tune the ponent list. If you have selected the default installation which installs all ponents, there won't be the ponents section in this json file, while you are free to append it manually.

• Go the the semantic directory (which is project_root/semantic by default), and run two gulp mands:

  1. gulp clean
  2. gulp build

Then semantic would be rebuilt with your latest ponent list. Below is an example for reference:

    {
      "base": "semantic/",
      "paths": {
        "source": {
          "config": "src/theme.config",
          "definitions": "src/definitions/",
          "site": "src/site/",
          "themes": "src/themes/"
        },
        "output": {
          "packaged": "dist/",
          "unpressed": "dist/ponents/",
          "pressed": "dist/ponents/",
          "themes": "dist/themes/"
        },
        "clean": "dist/"
      },
      "permission": false,
      "autoInstall": false,
      "rtl": false,
      "ponents": [
        "reset",
        "site",
        "button",
        "container",
        "divider",
        "header",
        "icon",
        "image",
        "input",
        "label",
        "segment",
        "form",
        "grid",
        "menu",
        "message",
        "dropdown",
        "transition"
      ],
      "version": "2.2.4"
    }