Search code examples
ruby-on-railslesssemantic-uisprocketsfomantic-ui

cause of Less::Error `unmatched '/*'`/ Sass::SyntaxError in my rails app

I just switched from Semantic UI to the community maintained Fomantic UI in my Rails app, and get one of two obscure errors when using either the npm package or the sass rails gem.

  1. With the npm package, I get Less::Error unmatched '/*' whenever the stylesheet_link_tags and such start to load fomantic assets in the document head. The fomantic styles and js are pulled into my project through the following two files:

    application.css.scss

    *= require 'semantic-ui/src/semantic

    application.js

    //= require semantic-ui/dist/semantic

    I notice that it works when I make both stylesheet and js load from semantic-ui/dist. However, doing that excludes a lot. Icons stop working. Relevant file stored in semantic-ui/src is semantic.less. Relevant files stored in semantic-ui/dist are semantic.min.css (which i do not require except for just now when switching things around to figure this out) and semantic.min.js (which i do require).

    Again, it "works" if I require the minified stylesheet in semantic-ui/dist, and it does not "work" if i require the semantic.less file in semantic-ui/src. Is this a problem with semantic.less or one of the other generated import files?

  2. With the sass rails gem, I get a Sass::SyntaxError Invalid CSS after "i.icon.stopwatch.": expected class name, was "20:before".

    Looking at the source, I see a number of these declarations: i.icon.stopwatch.20:before {content: "\f96f";}.

    Why is that throwing an error?

Does this mean that the npm package and gem have invalid css or that my app is compiling incorrectly? I have no opinions about using the npm package or the gem, I just want it to work. Everything worked fine when I was using the old Semantic UI. I am extremely confused and would greatly appreciate the help. Thank you!

Solution
    1. With the npm package

    It seems Sprockets doesn't support less from README

    Sprockets ... allows you to write assets in languages like CoffeeScript, Sass and SCSS.

    So you can't use /src direcotry.

    You could try to import /dist:

    # application.css.scss
import 'semantic-ui/dist/semantic'
    1. With the sass rails gem

    Thats a bug from Fomantic-UI already fixed, but have not been updated to Fomantic-UI-SASS