1

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?

Photo showing Error

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?

limciana
  • 331
  • 1
  • 3
  • 17
  • do I still need to @import "semantic" or something like that in my css? – limciana Nov 18 '17 at 15:05
  • Rails by default uses sass, not less, have you checked to ensure the less-rails gem is installed? It may be that the assets aren't being compiled/included since less isn't part of the pipeline. I've never tried the less version, but I know with the sass version that you do in-fact need the import statement. – DivXZero Nov 18 '17 at 16:27
  • would it be better to use the sass version of semantic ui, instead of less? I used less because the gem came from Semantic-UI themselves. – limciana Nov 18 '17 at 16:40
  • The sass version isn't official, but it is still regularly maintained, the only caveat is that you'll lose themes except for the default, but in my usage that's never really mattered, since you can still customize all of the variables. I would suggest just adding less-rails to your gemfile and seeing if that fixes the issue first, if not, try the sass version. – DivXZero Nov 18 '17 at 17:14
  • @DivXZero I switched to the sass version, followed the directions, and the "Stylesheet could not be loaded" error is now gone!! But the console still had those "error in parsing values" error. Would you know what is causing this? – limciana Nov 19 '17 at 06:48
  • It looks like there may be invalid CSS somewhere, either an unsupported attribute (some browser specific attributes will also throw errors if they aren't enclosed in a conditional), or even something like an extra semicolon or something. It could be difficult to track down manually. I'd suggest running `rake assets:precompile` and look into any errors it outputs. If it compiles fine, paste the generated css into a validator and dig deeper from there. https://jigsaw.w3.org/css-validator/validator.html.en – DivXZero Nov 19 '17 at 07:10
  • the invalid CSS could be from the semantic ui itself? I didn't put any other css code except Semantic UI – limciana Nov 19 '17 at 07:16

1 Answers1

2

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

Wally
  • 61
  • 6