Bootstrap not routing CSS or JavaScript? No route matches [GET] "/css/bootstrap.css"

Question

• Rails 4.1.1
• Ruby 2.0
• Webrick Server

I am trying to get bootstrap-sass working for the first time in development. I tried following the GitHub instructions, the Bootstrap website instructions and a couple of other videos that made it seem like I could install the gem, drag and drop the files, update the application.css.scss file and reference the css file in the application index page, call some css in the views and it would work.

I get an error when I check the source code of the page (which has the Bootstrap reference I put in the application.index.erb file) to confirm that Bootstrap is working. The code is there, but then I click the css link to confirm its working and get this:

No route matches [GET] "/css/bootstrap.css"

Here is my application.css.scss file:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets"
@import "bootstrap"

Even though i'm in development mode, I set the production file to:

  config.serve_static_assets = true

It's got to be some routing issue, but I cannot figure out why my asset pipeline isn't making the css and js available in development mode?

Also, here is my gem file:

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use mysql as the database for Active Record
gem 'mysql2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Bootstrap-sass - Latest Version for Web Design (CSS and HTML Layout)
gem 'bootstrap-sass', '~> 3.2.0'
# Vendor Prefixes
gem 'autoprefixer-rails'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Simple_form - Forms made easy! Top form generator on ruby-toolbox.com
gem 'simple_form'

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw]

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.0'

# Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'

# Use CoffeeScript for .js.coffee assets and views
 gem 'coffee-rails', '~> 4.0.0'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
 gem 'jquery-rails'

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

[UPDATE]

Here's the full error page [the url is: http://localhost:3000/css/bootstrap.css#]:

Routing Error
No route matches [GET] "/css/bootstrap.css"

Rails.root: C:/Users/Kevin/Desktop/sites/solar_permit

Application Trace | Framework Trace | Full Trace
Routes

Routes match in priority from top to bottom

Helper         HTTP Verb    Path                         Controller#Action
Path / Url          
root_path            GET            /                            projects#index
projects_path    GET            /projects(.:format)          projects#index
                     POST           /projects(.:format)          projects#create
new_project_path     GET            /projects/new(.:format)          projects#new
edit_project_path    GET            /projects/:id/edit(.:format)     projects#edit
project_path     GET            /projects/:id(.:format)          projects#show
PATCH                           /projects/:id(.:format)          projects#update
PUT                                 /projects/:id(.:format)          projects#update
DELETE                          /projects/:id(.:format)          projects#destroy
GET|POST            /:controller(/:action(/:id))(.:format)          :controller#:action

Here is the application layout file:

<!DOCTYPE html>
<html>
<head>
  <title>SolarPermit</title>
 <link href="/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
 <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
<div class="container">
    <ul class="nav nav-tabs">
        <li><%= link_to "Home", root_path %></li>
    </ul>
<%= yield %>
</div>

</body>
</html>

Answer 1

So i've managed to fix the problem by following:

ExecJS::RuntimeError in Users#index (RoR)

Despite the fact that it says removing the "//= require_tree" is ignoring the issue, I went around and around on trying to fix the ExecJS error that kept coming up after I installed node.js and changed the UTF info from 16 to 8. I removed the require_tree comment despite the suggestion that I was going around it.

I'm sure there'll be more errors down the road, but based on my research it looks like that there is an incompatibility issue with windows and something with ExecJS. I'm new to Ruby, so I think it really has something to do with a gem associated with it? For example, I tried the therubyracer gem (as suggested by other posts) and required gems but it wanted python installed and failed.

Anyhow, I read further and there are a lot of issues with ExecJS and windows that seems to be solved by transitioning to a linux based development server.

Either way, this works for me now.

Answer 2

This is not the way to include assets in rails... Where is your bootstrap.css located?

Instead of `/css/bootstrap.css' and 'js/bootstrap.js', you can include your full asset library like this (this is without turbolinks):

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>

And this is with turbolinks:

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

If you only want to include the above file (application.css.scss), then you should add:

<link href="/assets/application.css" rel="stylesheet" media="screen">

In which, bootstrap is included.

On the other hand, I think you should keep the @import directive out of your application.css file, which by the way should not be named application.css.scss.

Then, in a new file (for example main.css.scss) add the @import directives. This is the most common way to do it, and I think the right way. So:

application.css (NOT .scss):

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

main.css.scss:

@import "bootstrap-sprockets";
@import "bootstrap";