CODEWITHSUNDEEP
jquerycssruby-on-railsruby-on-rails-4asset-pipeline
t56k
t56k

Reputation: 7011

Cannot access CSS from JS in Rails app

I've got a Rails app that uses WYSIHTML in parts. It's controlled like so:

// richtext
if($('.richtext').length) {
  var editor = new wysihtml5.Editor(document.querySelector('.richtext'), {
    toolbar: 'wysihtml5-toolbar',
    parserRules:  wysihtml5ParserRules,
    stylesheets: '/assets/wysihtml5-stylesheet.css'
  });
}

This works fine locally, but wysihtml5-stylesheet.css cannot be found remotely. I've tried messing with asset pipeline/precompilation without luck. Any thoughts? It seems to have happened recently, i.e., it was working before. No settings other than what I just mentioned have been changed.

Please help.

Update

Even with asset_path the file can't be found:

stylesheets: '<%= asset_path "wysihtml5-stylesheet.css" %>'

Upvotes: 0

Views: 103

Answers (1)

Richard Peck
Richard Peck

Reputation: 76784

The problem is almost certainly in how you're calling your stylesheet.

--

In production, Sprockets fingerprints the asset files - adding large md5 hashes to them - making it incorrect to reference them with their "static" names (it simply won't work).

The way around this is to use one of the asset_path helpers to call the file (it will reference the file either in its "static" form, or "fingerprinted" form).

You've done this already, BUT I think you'll need to add .erb to your JS file to get it to work:

#app/assets/javascripts/application.js.erb
if($('.richtext').length) {
  var editor = new wysihtml5.Editor(document.querySelector('.richtext'), {
    toolbar: 'wysihtml5-toolbar',
    parserRules:  wysihtml5ParserRules,
    stylesheets: "<%=j asset_path('wysihtml5-stylesheet.css') %>"
  });
}

Upvotes: 1

Related Questions