CODEWITHSUNDEEP
htmlcssruby-on-railsrefreshpage-refresh
shriyog
shriyog

Reputation: 958

CSS not loading after refresh in Rails

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.

Upvotes: 0

Views: 2762

Answers (1)

Topher Hunt
Topher Hunt

Reputation: 4804

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 .
 */

Upvotes: 2

Related Questions