Semantic UI in Rails Stylesheet could not be loaded. A lot of errors in parsing value

Question

I'm working on a Rails app that uses Semantic UI as its frontend framework.

I'm using Rails 5.

I followed the instructions on this site (https://github.com/Semantic-Org/Semantic-UI-Rails-LESS) to include the gems needed for Semantic to work on Rails.

In my html.erb file (the left portion of the photo), I've used some Semantic UI buttons, just to test out if Semantic loads.

I believe it loaded, but I'm getting a bunch of errors in my console (+ it is saying on the top right that the Style sheet could not be loaded).

What seems to be the problem?

EDIT

I was able remove the 'Style sheet could not be loaded' error by lowering my 'sprockets' gem version to 3.6.3, instead of 3.7.1. (I'm not sure if this is a safe way of doing it, though. There were warning of deprecated methods in the sprockets, so people were suggesting to use version 3.6.3 instead.) However, the other errors in the console log still remained.

EDIT 2

The 'Style sheet could not be loaded' error still remained.

EDIT 3

I switched to the sass version of Semantic UI, and the "Style sheet could not be loaded" error is now gone! But, the console still had the "error in parsing values" error. I still don't know what is causing this. Any thoughts/fixes to this?

Answer 1

Since Rails 5.1 you can use yarn to integrate Semantic UI with your app. Here's how I've done it. Process is not perfect (you still have to run rails tmp:clear after changing your theme files), but it gives you advantage of using the latest semantic-ui package and not being dependent on gem updates.

Using

• Ruby: 2.5.1
• Rails: 5.2.0

Create a new rails app

$ rails new semantic_integration
$ cd semantic_integration
$ bundle install

create semantic.json in your app directory

{
  "base": "app/assets/semantic/semantic-ui",

  "paths": {
    "source": {
      "config"      : "src/theme.config",
      "definitions" : "src/definitions/",
      "site"        : "src/site/",
      "themes"      : "src/themes/"
    },
    "output": {
      "packaged"     : "dist/",
      "uncompressed" : "dist/components/",
      "compressed"   : "dist/components/",
      "themes"       : "dist/themes/"
    },
    "clean"        : "dist/"
  },

  "permission": false,
  "autoInstall": true,
  "rtl": false,
  "version": "2.3.1"
}

run $ yarn add semantic-ui. This will install semantic-ui in app/assets/semantic

Add followin lines to config/initializers/assets.rb

# semantic-ui assets
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'semantic')
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'semantic', 'semantic-ui', 'src', 'themes', 'default')

Add Semantic UI css

// app/assets/stylesheets/application.css
*= require 'semantic-ui/src/semantic'

Add Semantic UI js

// app/assets/javascripts/application.js
// after turbolinks

//= require jquery
//= require semantic-ui/dist/semantic

Add init.js and require it in app/assets/javascripts/application.js

window.App || (window.App = {});

App.init = function() {
  // here goes Semantic UI component initialisation
  // i.e.
  $('.ui.menu .ui.dropdown').dropdown({
    on: 'hover'
  });
  $('.ui.menu a.item')
  .on('click', function() {
    $(this)
    .addClass('active')
    .siblings()
    .removeClass('active');
  });
};

$(document).on('turbolinks:load', function () {
  App.init();
});

In you Gemfile add:

gem 'therubyracer'
gem 'less-rails'

and run bundle install

Now you app should be able to compile Semantic UI less files.
If you're getting error:

expected ')' got 'o'

go to app/assets/semantic/semantic-ui/src/theme.less and remove (optional) keywords on @import statements

---

Icon font

go to: app/assets/semantic/semantic-ui/src/site/globals/site.variables and add:

/* Fonts */
@fontPath  : "assets/fonts";

then go to: app/assets/semantic/semantic-ui/src/site/elements/icon.variables and add:

/*******************************
             Icon
*******************************/

/*--------------
   Font Files
---------------*/
@fontName: 'icons';
@src:
  font-url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
  font-url("@{fontPath}/@{fontName}.woff2") format('woff2'),
  font-url("@{fontPath}/@{fontName}.woff") format('woff'),
  font-url("@{fontPath}/@{fontName}.ttf") format('truetype'),
  font-url("@{fontPath}/@{fontName}.svg#icons") format('svg')
;
@fallbackSRC: font-url("@{fontPath}/@{fontName}.eot");

/*--------------
 Optional Files
---------------*/

/* Outline Icons */
@importOutlineIcons: true;
@outlineFontName: 'outline-icons';
@outlineSrc:
  font-url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'),
  font-url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'),
  font-url("@{fontPath}/@{outlineFontName}.woff") format('woff'),
  font-url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'),
  font-url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg')
;
@outlineFallbackSRC: font-url("@{fontPath}/@{outlineFontName}.eot");

/* Brand Icons */
@importBrandIcons: true;
@brandFontName: 'brand-icons';
@brandSrc:
  font-url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'),
  font-url("@{fontPath}/@{brandFontName}.woff2") format('woff2'),
  font-url("@{fontPath}/@{brandFontName}.woff") format('woff'),
  font-url("@{fontPath}/@{brandFontName}.ttf") format('truetype'),
  font-url("@{fontPath}/@{brandFontName}.svg#icons") format('svg')
;
@brandFallbackSRC: font-url("@{fontPath}/@{brandFontName}.eot");

---

Important!

For some reason less-rails gem monitors changes to app/assets/semantic/semantic-ui/src/semantic.less but not any other files in app/assets/semantic/semantic-ui/src folder. After changin *.variables, *.overrides, or *.config files run rails tmp:clear or manually delete tmp/cache/assets folder.

---

Demo App

https://github.com/ziinfo/semantic_integration.git