CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-4
XYZ
XYZ

Reputation: 27427

Why rails loads all css files even when the page does not need that particular stylesheet?

New to Rails (Have used it for 3 weeks). I have several views and their corresponding scss file.

For example,

Views

view1.html.erb
view2.html.erb
view3.html.erb


Stylesheet

view1.scss
view2.scss
view3.scss

When I load view1.html inside <head> of the page all three stylesheet file are been loaded (I actually do now need view2.css and view3.css at this moment).

Is there a reason behind it? Why not just load the static file the current page need? For example, only load view1.css in page view1.html.

I do know in production environment all these will be combined into one single file. Is that because all these static assets will be cached by the browser so load a single file at the first time make the subsequent visit much faster?

The reason I ask this question is because I would like only include controller specific stylesheets in the page. I have tried code below but which cause non ppreprocess error.

<%= javascript_include_tag params[:controller] %>
<%= stylesheet_link_tag params[:controller] %>

I am still reading the doc at link below,

http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

Thanks for your time viewing the question.

Upvotes: 1

Views: 1755

Answers (2)

XYZ
XYZ

Reputation: 27427

Explicitly declare all controllers make me feel bad, therefore, we replace @Sravan 's solution to the code below,

Rails.application.config.assets.precompile << /(^[^_\/]|\/[^_])[^\/]*$/
Rails.application.config.assets.precompile += ["*.js.es6", "*.scss"]

Upvotes: 0

Sravan
Sravan

Reputation: 18657

You can try achieve that in this way,

If you generate a controller named Userscontroller Rails adds new files at app/assets/javascripts/users.js.coffee and another at app/assets/stylesheets/users.css.scss. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as

<%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>

First, disable the default loading of all stylesheets by removing any extra requires in the application.css manifest.

*= require_tree .

Remove this line or change to,

* require_tree . // removed '='

Tell Rails to compile our controller assets

By default, the asset pipeline only compiles application.js/.css and any files they require. Because we removed the require_tree . directive, we need to tell Rails about our controller-specific assets or they won’t get compiled.

Create a new initializer file called config/initializers/assets.rb and add the following (replacing the controller names with your own):

%w( controller_one controller_two controller_three ).each do |controller|
  Rails.application.config.assets.precompile += ["#{controller}.js.coffee", "#{controller}.css.scss"]
end

Note: You can rename the css.scss to css also.

Check this link for details

Upvotes: 6

Related Questions