How to add stylesheets in ruby on rails

Question

I am referencing stylesheets in my index.html.erb file as below

<%= stylesheet_link_tag "/stylesheets/CSS/External/bootstrap.min.css" %>

I have my folder structure as

apps\assests\stylesheets\CSS\Internal

and

apps\assests\stylesheets\CSS\External

But in page, it is rendering as below

<link rel="stylesheet" media="screen" href="/stylesheets/CSS/External/bootstrap.min.css">

Also, I see that my files are rendering twice as attached image

and I get the following errors

Possible duplicate of [How do I use CSS with a ruby on rails application](https://stackoverflow.com/questions/804961/how-do-i-use-css-with-a-ruby-on-rails-application) — Amthieu, Apr 23 '18 at 11:24
You must read this carefully http://guides.rubyonrails.org/v5.0.0/asset_pipeline.html#how-to-use-the-asset-pipeline for basic asset pipeline — fool-dev, Apr 23 '18 at 11:37
Can you just give me a simple example with works with the structure that I have provided as per my comments Also, as I said, I see two times that the files are being loaded — mallela prakash, Apr 23 '18 at 11:52

fool-dev · Answer 1 · 2018-04-23T16:24:22.317

1

First of all, you don't need this line in index.html.erb

<%= stylesheet_link_tag "/stylesheets/CSS/External/bootstrap.min.css" %>

because it's included globally into layouts/application.html.erb something like this

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

For JS

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

This will mapping automatically from assets folder.

If your folder structure like this stylesheets/CSS/External then opens your application.css and add like this

 *= require CSS/External/bootstrap.min

after *= require_tree .

You can use Bootstrap Ruby Gem for bootstrap styling, it's simple & easy to implementation based on there doc

Update

For example, the directories are assets/stylesheets/css/external and the css file are inside this directory like

assets/stylesheets/css/external/
...............................bootstrap.css
...............................other.css

and your assets/stylesheets/application.css

/*
*= require_tree .
*= require css/external/bootstrap
*= require css/external/other
*= require_self
*/

edited Apr 23 '18 at 16:24

answered Apr 23 '18 at 12:03

fool-dev

Hi fool-dev As per your suggestion, I have added all my CSS files in `application.css` and removed all my CSS references from index.html.erb file But still I dont see references of those files in my html file – mallela prakash Apr 23 '18 at 12:50
See this repo for reference [here](https://github.com/shabbir-ahmed/todo-app-with-ruby-on-rails-5/tree/master/app/assets/stylesheets) – fool-dev Apr 23 '18 at 12:54
You just put `bootstrap.min.css` or `bootstrap.css` into `assets/stylesheets` folder and do nothing, see what's happening and leave `application.css` as before – fool-dev Apr 23 '18 at 12:56
If I place all of my CSS files in stylesheet folder and add its corresponding entries in assest.rb, then it is working fine. But, If I wan to use my folder structure as mentioned above, how do i do that? – mallela prakash Apr 23 '18 at 15:26

1 Answers1