Gulp and LESS issues - can't add Semantic UI to project

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:

{
  "name"        : "semantic",
  "description" : "Semantic empowers designers and developers by creating a shared vocabulary for UI.",
  "homepage"    : "http://www.semantic-ui.com",
  "author": {
    "name" : "Jack Lukic",
    "web"  : "http://www.jacklukic.com"
  },
  "dependencies": {
    "jquery"      : ">=1.8"
  },
  "main": [
    "app/assets/stylesheets/semantic-ui.scss",
    "app/assets/javascripts/semantic-ui.js"
  ],
  "keywords": [
    "semantic",
    "ui",
    "css3",
    "framework"
  ],
  "license" : "MIT",
  "ignore": [
    "src/site",
    "test"
  ]
}

It would be nice if there was a way to simply use the official Semantic UI package.

1 Like

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.

1 Like

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:

  "overrides": {
    "semantic" : {
      "main": [
        "src/semantic.less",
        "dist/semantic.css",
        "dist/semantic.js"
      ]
    }
  }

Gulp refuses to process the LESS files.

Ahh, you must be using the gulp-refuse module :wink:

You’re overthinking this and seems like you’re just reading chunks of posts instead of the full post or thread. See here: Sage with LESS (without SASS) - #4 by JulienMelissas

I successfully installed the original, LESS version of Semantic UI using Bower in about 5 minutes.

$ bower uninstall bootstrap-sass --save && bower install semantic --save

Then in assets/manifest.json change main.scssmain.less then go create that main.less file and copy over the wiredep block from the original main.scss (change the scss line to less).

I then just had to copy Semantic UI’s theme.config.example to theme.config within the src dir (really poor project dir structure). Result:

5 Likes

@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.

Glad you got it sorted :thumbsup: