Semantic UI SASS (or NOT) on Sage 9 dev

Part 3 of a series, lets get Semantic UI Sass port working

yarn add semantic-ui-sass

yarn will download semantic-ui-sass from the npm registry and update our package.json


➜ openplanetculture.com yarn add semantic-ui-sass
yarn add v0.21.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ [email protected]
✨ Done in 6.26s.

now I run yarn start and get errors, its not looking good for Semantic UI and Sage, especially from a, lets get the site up quickly perspective, so I will roll back to Bootstrap 4.

Some factors

  1. Semantic UI has site templates which requires LESS, apparently SASS doesn’t do import of variables
  2. Roots uses SASS, and so I would either have to use SASS and LESS in Roots or use the Semantic UI Sass port
  3. Semantic UI Sass may or may not be feature complete
  4. Sage imports Bootstrap and so I would need to manually work through and compare and contrast, matching Bootstrap to Semantic UI
  5. Semantic UI Sass doesn’t have the variable for colors or palettes and colors are mixed into the CSS/SCSS, this is a real limitation and for me is a deal killer
  6. perhaps the composer Sage project setup option without a style at all would be better, but there would still be questions about Semantic UI itself and especially the fact that there is no official SASS port now, or possibly ever
  7. Sage webpack config would need to be changed to run LESS, probably not too difficult, but possibly time consuming

so, its a rabbit hole of complexity and something I don’t want, so its back to the default, Bootstrap 4.

I really love the idea of Semantic UI and haven’t given up on it and will come back to again, but right now it looks like I will stick with Bootstrap 4

Maybe will try to come back to Semantic UI LESS on Sage after building a site with the default Bootstrap 4.