I created a fork of the Sage starter theme and completely stripped out Bootstrap. I’m now trying to add in the Semantic UI framework to my Sage project (via bower), however Gulp refuses to process the LESS files.
I looked at this thread and @JulienMelissas mentioned that the Sage Gulpfile doesn’t process LESS by default - if that’s the case, then how do you enable LESS-processing? If I look at the Gulpfile, I can see a pipe for Gulp-Less.
I found a workaround by installing this SASS fork of Semantic UI:
bower install --save semantic-ui-sass
Had to manually create a bower.json file in the bower_components subdirectory, as this particular package doesn’t contain one:
Should add that I already tried renaming main.scss to main.less and removing all @import references to *.scss files with no luck. The LESS dependencies never get injected by wiredep. All of my *.scss files are currently blank - I don’t have any custom styles at this point, just looking to use the default Semantic UI classes.
I believe this is related to the following issue - basically Bower updated the specs of the bower.json file and stopped including CSS; as a result wiredep could no longer find the CSS. Looks like this is still open on the Bower side.
The workaround is to add an override in your bower.json file, here’s what I’m using right now for Semantic UI:
@cfx thank you so much for the step-by-step instructions, I definitely overcomplicated this! The remaining issue is that the Font Awesome icons won’t work unless you manually copy the font files to the assets/fonts subfolder, however that is a small inconvenience.