Cannot access CSS from JS in Rails app

Question

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" %>'

on production, assets are compiled and are given a hash at the end of the filename which is most probably the reason why you can't see it. look at api.rubyonrails.org/classes/ActionView/Helpers/… for the asset_path method — jvnill
– jvnill, Commented Nov 17, 2015 at 4:50
Same problem, just with the MD5 hash at the end, i.e., cannot find http://domain.com/assets/wysihtml5-stylesheet-9d0d93a7a284f16a3dea08a722430b272064c192b7c57a41329d7f86a8adb7da.css — t56k
– t56k, Commented Nov 17, 2015 at 5:32
hmm you can't actually set the md5 hash directly. you have to use the rails helpers to generate the link to the file or add the file directly under the public folder. — jvnill
– jvnill, Commented Nov 17, 2015 at 5:35
hmm it most probably have something to do with how your assets are served in production. search around for serve_static_files option for rails 4 and tinker with it. — jvnill
– jvnill, Commented Nov 17, 2015 at 5:43
I'm voting to close this question as off-topic because the problem was environment specific and nothing to do with Rails. — t56k
– t56k, Commented Nov 26, 2015 at 6:50

Richard Peck · Accepted Answer · 2015-11-17 13:36:59Z

1

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') %>"
  });
}

answered Nov 17, 2015 at 13:36

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

t56k Over a year ago

Thanks for the suggestion, but yeah, .erb was already added to the JS file.

Collectives™ on Stack Overflow

Cannot access CSS from JS in Rails app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related