CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-5asset-pipeline
davidhu
davidhu

Reputation: 10434

Precompile assets not loading properly

My application has a lot of 3rd party js/css files. We sped up the deploy by compiling these files into external-[hash].js and external-[hash].css (So Rails don't have to compile these files on every single deploy)

And loaded them like this in application.html.erb

<%= stylesheet_link_tag "external", :media => "all" %>
<%= javascript_include_tag "external" %>

These two files are under /public/assets/. This was working fine when we are on Rails 4. We are currently trying to upgrade to Rails 5, and these two files are not loading properly.

I changed the tags into below and in the chrome console, these files appear to have been loaded properly. 

<%= stylesheet_link_tag "/assets/external-[hash]", :media => "all" %>
<%= javascript_include_tag "/assets/external-[hash]" %>

chrome console source screenshot

However, when I add in the application style/js tags below the external tags

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

I keep getting the error

Error: "img" failed to @extend ".img-responsive".
       The selector ".img-responsive" was not found.
       Use "@extend .img-responsive !optional" if the extend should be able to fail.

Looking into the external-[hash].css, I am able to see the .img-responsive selector defined. So, it seems like Rails 5 does not properly load these two files?

I'm currently using Rails 5.1.7, Ruby 2.4.2

I also tried adding config.public_file_server.enabled = true to environment files.

Here are how I've setup the external files.

I have an external.js, and external.scss, these files live under app/assets.

Inside application.js/css, I added stub external to both, so when the rails application deploys, it ignored the external files. I would run RAILS_ENV=external_assets rails assets:precompile and commit those files to git, expecting them to be loaded first.

Example external.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.readyselector
//= require bootstrap
//= require bootstrap-datepicker
//= require moment
//= require d3
//= require c3
//= require jsgrid.min
//= require bootstrap-datetimepicker

external.css

/*
 *= require_self
 *= require bootstrap-datepicker
 *= require bootstrap-datetimepicker
 *= require rails_bootstrap_forms
 *= require c3
 *= require jsgrid.min
 *= require jsgrid-theme.min
 */

 @import "font-awesome-sprockets";
 @import "font-awesome";
 @import 'bootstrap-sprockets';
 @import 'bootstrap';
 @import 'bootstrap-datetimepicker';

Please let me know if I can provide any other information.

Upvotes: 1

Views: 1345

Answers (1)

NensiMakawana
NensiMakawana

Reputation: 54

Try some below commands

RAILS_ENV=production rails assets:clean
RAILS_ENV=production rails assets:clobber

And change in production

config.assets.compile = true

Then again run

RAILS_ENV=production rails assets:precompile

Upvotes: 1

Related Questions