CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-5
mallela prakash
mallela prakash

Reputation: 15

How to add stylesheets in ruby on rails

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

enter image description here

and I get the following errors

enter image description here

Upvotes: 1

Views: 2694

Answers (1)

fool-dev
fool-dev

Reputation: 7777

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

Upvotes: 1

Related Questions