Search code examples
semantic-uiyarnpkglernayarn-workspaces

Use Semantic UI with Lerna and yarn workspaces


The Semantic UI (and Fomantic UI) installer (famously?) doesn't support yarn because of its interactive postinstall script. Even with "autoInstall": true in semantic.json, yarn will still break on the first install.

This makes it hard to keep a themed Semantic UI installation in its own package in a Lerna monorepo, when using workspaces. Even if --ignore-scripts is added to Lerna's package.json scripts, it will still run a standard yarn install by itself every now and then when making changes, and become blocked by Semantic UI.

Is there a way around this?


Solution

  • One way is to edit packages/semantic-ui/package.json, removing "semantic-ui" from dependencies and adding the script "install": "node ./install.js". Then create a script that spawns npm install semantic-ui --no-save, only if yarn is detected in the environment (to prevent an infinite install loop; check process.env.npm_config_user_agent).

    This is a convoluted and error-prone way, however if a semantic.json with "autoInstall": true is present it will automatically install Semantic UI and run the gulp job, making the custom theme available to other packages at @monorepo/semantic-ui/dist/semantic.min.css.