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