CSS not loading after refresh in Rails

Question

I'm new to rails, I have created an app in which user has a profile and that can be edited with edit profile option.

In controller I have,

ProfilesController

In Views I have,

index.html.erb
edit.html.erb

It all works fine for index page, but for the edit page it's cool for first load and then after refreshing it, the css files are not loading.

url looks like http://localhost:3000/profiles/25/edit

Everything works right for index page no matter how many refreshes, but it's disappointing for edit page.I have inspected elements in browser, it says GET http://localhost:3000/profiles/25/assets/bootstrap.min.css [HTTP/1.1 404 Not Found 650ms]

i.e it searches for files in localhost:3000/profiles/25/assets/ which doesn't exists instead of searching in localhost:3000/assets/

EDIT :

Structure:

app/assets/stylesheets
application.css
bootstrap.min.css
style.css

In application.html.erb , I link application.css as,

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

and other css files as

<link href="assets/style.css" rel="stylesheet">
<link href="assets/bootstrap.min.css" rel="stylesheet">

Am I correct with structure and linking? If not then where to place and use external css files.

Please help!! Thanks in advance.

I feel weird with the path of assets profiles/25/assets/bootstrap.css, can you show us the code? — rails_id
– rails_id, Commented Apr 29, 2015 at 16:52
@infused in application.html <link href="assets/bootstrap.min.css" rel="stylesheet"> .It's working fine on first load, but doesn't load on refreshing edit page — shriyog
– shriyog, Commented Apr 29, 2015 at 19:47
@anonymousxxx it's the GET request made by browser, I found that one after inspecting element.It should be /assets/bootstrap.css instead. — shriyog
– shriyog, Commented Apr 29, 2015 at 19:55

Topher Hunt · Accepted Answer · 2015-04-29 17:13:46Z

2

The default Rails asset pipeline assumes that you want all your stylesheets to apply to every page. I found this awkward at first but quickly realized that it fits well with Rails' ethos of "Don't repeat yourself" and creating sensible defaults to save the developer time. Most of the time, the styles you're writing won't mind being present on all pages.

From what I'm hearing, one page in your app loads fine but another one fails because the CSS asset isn't found. This suggests to me that you're doing something apart from Rails' asset pipeline, and consequently bootstrap.css isn't getting loaded incorrectly. Can you search your app/assets and app/views directories for all mentions of bootstrap, and let me know what you find?

Ideally the only place the Bootstrap styles should be declared would be in the app/assets/stylesheets/application.css "manifest file" which looks something like this:

/*
 * This is a Sprockets manifest. See https://github.com/sstephenson/sprockets
 * It compiles all CSS for the old site design (pre-WPBoom redesign).
 *
 *= require bootstrap
 *= require jquery-ui
 *= require_tree .
 */

answered Apr 29, 2015 at 17:13

Topher Hunt

4,8833 gold badges32 silver badges60 bronze badges

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

5 Comments

shriyog Over a year ago

Thanks for the response! Can you please tell me how to link external css(eg. bootstrap.css and style.css) files in application.html.erb . I have put them in /assets/stylesheets ?

rails_id Over a year ago

@narush you have to store external css (third party) into vendor directory, /vendor/assets/stylesheets

Topher Hunt Over a year ago

@narush it's worth reading Rails' asset pipeline guide. This section explains how to include a specific asset in your layout template, but if possible you should try to keep all your styles in application.css and then only include that single file in your layout. Once you get used to this it makes for WAY less work in the long run.

shriyog Over a year ago

Thanx man! It worked! .... worth reading pipeline guide.We need to link ext. css by <%= stylesheet_link_tag "filename" %> rather than <link href=""> to dynamically link them even after refreshing.

Topher Hunt Over a year ago

Ah yes when linking to assets in Rails (even image URLs in <img tags! Even image URLs mentioned in your CSS!) you should use Rails' built-in helpers such as image_tag (in an ERB template) or image-url (in CSS) rather than providing the path directly, because depending on your deployment environment config, specifying the direct path may cause all your asset links to break, leaving your live site imageless.

Collectives™ on Stack Overflow

CSS not loading after refresh in Rails

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related