Error importing semantic_ui on production

[stevenspiel]

Subject of the issue

Describe your issue here.

On production, I'm getting the error in the chrome console:

Failed to load resource: the server responded with a status of 404 (Not Found)
https://my-url.com/assets/resources/semantic_ui/semantic_ui.css

Your environment

• less-rails-semantic_ui gem 2.1.8.2
• version of Rails 4.2.5.1

  Steps to reproduce

My css manifest file is this:

application.less:

@import 'semantic_ui/semantic_ui.css';
@import 'base';
@import 'layout';

/*
 *= require_tree .
 *= require_self
 */

The vendor/semantic_ui/semantic_ui.css file is the generated one:

/*
 *******************************************************************************
 ** !!! AUTOMATICALLY GENERATED FILE. BE CAREFUL WHEN YOU MERGING CHANGES !!! **
 *******************************************************************************
 */

/*
 *= require semantic_ui/definitions/modules/accordion.less
 *= require semantic_ui/definitions/views/ad.less
 *= require semantic_ui/definitions/collections/breadcrumb.less
 *= require semantic_ui/definitions/elements/button.less
 *= require semantic_ui/definitions/views/card.less
 *= require semantic_ui/definitions/modules/checkbox.less
 *= require semantic_ui/definitions/views/comment.less
 *= require semantic_ui/definitions/elements/container.less
 *= require semantic_ui/definitions/modules/dimmer.less
 *= require semantic_ui/definitions/elements/divider.less
 *= require semantic_ui/definitions/modules/dropdown.less
 *= require semantic_ui/definitions/modules/embed.less
 *= require semantic_ui/definitions/views/feed.less
 *= require semantic_ui/definitions/elements/flag.less
 *= require semantic_ui/definitions/collections/form.less
 *= require semantic_ui/definitions/collections/grid.less
 *= require semantic_ui/definitions/elements/header.less
 *= require semantic_ui/definitions/elements/icon.less
 *= require semantic_ui/definitions/elements/image.less
 *= require semantic_ui/definitions/elements/input.less
 *= require semantic_ui/definitions/views/item.less
 *= require semantic_ui/definitions/elements/label.less
 *= require semantic_ui/definitions/elements/list.less
 *= require semantic_ui/definitions/elements/loader.less
 *= require semantic_ui/definitions/collections/menu.less
 *= require semantic_ui/definitions/collections/message.less
 *= require semantic_ui/definitions/modules/modal.less
 *= require semantic_ui/definitions/modules/nag.less
 *= require semantic_ui/definitions/modules/popup.less
 *= require semantic_ui/definitions/modules/progress.less
 *= require semantic_ui/definitions/elements/rail.less
 *= require semantic_ui/definitions/modules/rating.less
 *= require semantic_ui/definitions/globals/reset.less
 *= require semantic_ui/definitions/elements/reveal.less
 *= require semantic_ui/definitions/modules/search.less
 *= require semantic_ui/definitions/elements/segment.less
 *= require semantic_ui/definitions/modules/shape.less
 *= require semantic_ui/definitions/modules/sidebar.less
 *= require semantic_ui/definitions/globals/site.less
 *= require semantic_ui/definitions/views/statistic.less
 *= require semantic_ui/definitions/elements/step.less
 *= require semantic_ui/definitions/modules/sticky.less
 *= require semantic_ui/definitions/modules/tab.less
 *= require semantic_ui/definitions/collections/table.less
 *= require semantic_ui/definitions/modules/transition.less
 */

When I rename this file extension to vendor/semantic_ui/semantic_ui.css, there's not console error, but there are also no semantic-related styles on the page.

Other files import just fine. Why isn't this one working? I imagine because it's css. It loads fine in development.

My production.rb environment file has this config:

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # Asset digests allow you to set far-future HTTP expiration dates on all assets,
  # yet still be able to expire them through the digest params.
  config.assets.digest = true

and config/initializers/assets.rb looks like this:

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.coffee, application.less, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )

Can I get an explanation as to why it's not working and what to do about it?

[maxd]

Could you please create minimal project for reproduce problem?

[stevenspiel]

Ok, I created a sample app (here's the github link) and pushed it to heroku to replicate the production error.

Locally, you can clone the repo, bundle and rails server (no database required)

This is what I'm getting on my machine:

And when deploying to heroku (here), I get this:

[maxd]

Seems like you are incorrectly including Semantic UI CSS. Instead of require directive described here you are using @import directive here.

[stevenspiel]

Good call. That did it. Thank you!