0

I have been trying to improve the page load time in Rails 3, I went through few blogs where I learned that I can include the css, js file names in application.css and application.js respectively.

For testing purpose I removed the files from the layout and included it in application.css, and then on page reload the css files didn't reload.

My current application.css file:

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.

    *
    *= require_self
    *= require 'owl.carousel.min.css'
    *= require 'owl.carousel.min.css'
    *= require 'owl.theme.min.css'
    *= require "flag-sprites.min.css"
    *= require 'owl.transitions.min.css'
    */

layout.html.erb:

<%= stylesheet_link_tag "application.css" %>
Sahil
  • 3,338
  • 1
  • 21
  • 43
  • whats main problem? – uzaif Jul 11 '16 at 10:41
  • By using the above code, the above mentioned css files do not load. – Sahil Jul 11 '16 at 10:41
  • remove .css and dont use quot with `require` – uzaif Jul 11 '16 at 10:46
  • I removed the quotes, and .css from the file names but doesn't help. What I want to achieve is have multiple files served as one file so that number of requests are reduced. – Sahil Jul 11 '16 at 10:49
  • did you test it in production environment? `rails s -e producation` – uzaif Jul 11 '16 at 10:57
  • No not in production environment? Isn't there a way to test it out in local first? – Sahil Jul 11 '16 at 10:58
  • in `config/environment/development.rb` file add below line `config.assets.debug = false` – uzaif Jul 11 '16 at 11:09
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116974/discussion-between-uzaif-and-sahil). – uzaif Jul 11 '16 at 11:09
  • Yes it doesn't work it is not loading anything from the file application.css. – Sahil Jul 11 '16 at 11:24
  • did you restart server? – uzaif Jul 11 '16 at 11:25
  • try using = require owl.carousel.min.css without single quote – chaitanya Jul 11 '16 at 11:34
  • @uzaif, yes I restarted server. Yes still not working, should I do any change in config files, or add a gem? – Sahil Jul 11 '16 at 11:43
  • @chaitanya, I have removed the quotes as said by uzaif. – Sahil Jul 11 '16 at 11:43
  • still not working? – uzaif Jul 11 '16 at 11:44
  • do you have `uglifier` gem? – uzaif Jul 11 '16 at 11:45
  • This works in rails 4 app by default but I am unable to get this work in Rails 3 app. Yes I have uglifier gem installed. – Sahil Jul 11 '16 at 11:46
  • @Sahil just want to confirm if all your css files are under `app/assets/stylesheet` folder. Also just want to know if you see any errors in inspect element's console or maybe in network tab in browser. – T. D. Ben Jul 11 '16 at 17:05
  • Yes, all the css files are under assets/stylesheets. And in the network tab the application.css appears as it is with the require statements. – Sahil Jul 11 '16 at 17:18
  • So, in browser inspect you are able to see this `*= require_self` statement as well? If you are seeing this, maybe it is not getting compile properly. – T. D. Ben Jul 11 '16 at 17:48
  • Yes, I get that. Is it supposed to be application.css or something else under stylesheets? – Sahil Jul 11 '16 at 17:51
  • I don't know if this is the cause, please check if `sass-rails` gem is included in Gemfile, if not then try adding it and running bundle install. Then check by restarting the server. – T. D. Ben Jul 11 '16 at 18:30
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/117010/discussion-between-t-d-ben-and-sahil). – T. D. Ben Jul 11 '16 at 18:39
  • @T.D.Ben, I am using import now, couldn't get require to work. `sass-rails` is already installed. – Sahil Jul 12 '16 at 07:36

1 Answers1

0

If you use

*= require_tree .

It will load all the css files inside app/assets/stylesheet so didn't need to mention each file name.

One more thing to Note is you need to restart the server after updating the application.css and application.js files. Hope this help.

power
  • 1,225
  • 7
  • 16
  • I do not want to load the entire list there are more than 50 css files specific for each feature, controller. I am trying to optimize the code. – Sahil Jul 11 '16 at 10:55
  • you can take a reference from [link](http://stackoverflow.com/questions/8422475/css-is-not-loading-in-app), there are multiple options, which you can try. – power Jul 11 '16 at 11:07