cola
cola

Reputation: 12466

Ruby on Rails: How can I add a css file with rails project?

The application.html.erb file:

<!DOCTYPE html>
<html>
<head>
  <title>Site</title>
  <%= stylesheet_link_tag    :all %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

I have a file "cake.generic.css" in public/ folder.

But when I reload the page the effect of css file is not working.

If I see the page view source I see something like this:

<!DOCTYPE html>
<html>
<head>
  <title>Site</title>
  <link href="/assets/all.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

  <meta content="authenticity_token" name="csrf-param" />
<meta content="6CPvchXr1amagxd7VmOzB82WGx/WmjfDOXjMLfjLzqQ=" name="csrf-token" />
</head>
<body>

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>


</body>
</html>

What should I do to fix this problem?

How can I set the public folder for stylesheets and javascripts?

It looks that app/assets folder is set for css and js files?

Upvotes: 2

Views: 35666

Answers (4)

PrinceMo4
PrinceMo4

Reputation: 11

I had similar issue, but my fix was to make sure the css is under app/assets/stylesheets/ and I had to add the below line to the application.css file (my css file is named custom.css)

@import 'custom'

Upvotes: 1

Cam Song
Cam Song

Reputation: 2954

Copy cake.generic.css to the folder public/assets/, if not exists make directory first.

then add this to you erb <%= stylesheet_link_tag "cake.generic" %>

2nd question: How can i set the public folder for stylesheets and javascripts ?

Just put all you images, js and css file under 'public/assets/' and then include them in the erb pages

3rd question: It looks that app/assets folder is set for css and js files ?

Yes, 'app/assets/stylesheets/' for css and scss file and 'app/assets/javascripts' for js and coffeescript file

You can get more info here: http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline

Hope this work for you:)

Upvotes: 5

Perry Horwich
Perry Horwich

Reputation: 2846

Rails is likely consolidating all your css files into one that it is calling assets/all.css

Consider using the free plug-ins firebug + firepath to further characterize the problem. This common combo of tools will help you to interrogate web page elements and see the css that is contributing to their display.

Upvotes: 5

Srinivas M.V.
Srinivas M.V.

Reputation: 6608

Your Style sheet should be placed in the following directory \public\stylesheets from your root project and also if you want to specify different location provide an absolute path inside stylesheet_link_tag("/public/yourfolder/test.css")

Upvotes: 3

Related Questions