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

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