I have seen this question asked on this site several times as it seems to be a common problem. Unfortunately none of those solutions worked for me. Below is be my code. This started after I installed Bootstrap on my Ruby on Rails app so I assume there is either a bug or I missed something.
My Gemfile:
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
gem 'duktape'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
gem 'jquery-rails'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :production do
gem 'pg'
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of chromedriver to run system tests with Chrome
gem 'chromedriver-helper'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
My application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
My application.html.erb file which contains my Navbar:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>Website</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application.css" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<!-- Navigation -->
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Alex Ross</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Education/Experience', root_path(anchor: 'Education') %>
</div>
</li>
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Projects', root_path(anchor: 'Projects') %>
</div>
</li>
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Skills', root_path(anchor: 'Skills') %>
</div>
</li>
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Certifications', root_path(anchor: 'Certifications') %>
</div>
</li>
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Contact', root_path(anchor: 'Contact') %>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
<%= yield %>
</body>
</html>
My application.scss file:
#import "bootstrap-sprockets";
#import "bootstrap";
body {
margin: auto;
max-width: 800px;
padding-top: 65px;
}
a:link {
color: white;
}
a:hover {
color: white;
}
a:visited {
color:white;
}
#Intro a:link { color:black; }
#Intro a:visited { color: black; }
#Intro a:hover { color: black; }
#Intro a:active { color: black; }
In your application.scss file:
#import "bootstrap";
body {
margin: auto;
max-width: 800px;
padding-top: 65px;
}
a:link {
color: white;
}
a:hover {
color: white;
}
a:visited {
color:white;
}
Or create new file "main.sccs":
body {
margin: auto;
max-width: 800px;
padding-top: 65px;
}
a:link {
color: white;
}
a:hover {
color: white;
}
a:visited {
color:white;
}
And ... add import to "application.sccs" > #import "main";
Maybe error with gem.
Install gems in Gemfile:
css
gem 'bootstrap', '~> 4.1.3'
gem 'jquery-rails'
And write in terminal "bundle i".
It works now! I removed duktape from my gemfile, installed nodejs on my computer, and then rearranged application.js to look like this:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
Related
I am trying to load bootstrap styles into a rails app using the bootstrap-sass gem and its documentation here, but when I copy examples from the bootstrap documentation the styles do not load properly. Following that documentation, it asks you to put the statements:
//= require jquery
//= require bootstrap-sprockets
inside of app/assets/javascripts/application.js, however this file does not get created in that directory when I create a new app, instead it is in app/javascript/packs/application.js. I tried placing those statements into both files, after creating the second file mentioned and still the styles were not rendering properly.
This is what the navbar I am attempting to add looks like on the site:
And these are the files that were changed following the tutorial:
Gemfile:
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.7.1'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
gem 'jquery-rails'
gem 'sassc-rails', '>= 2.1.0'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '~> 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
app/assets/stylesheets/application.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
app/assets/javascripts/application.js:
//= require jquery
//= require bootstrap-sprockets
app/javascript/packs/application.js:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
//= require jquery
//= require bootstrap-sprockets
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
navbar html from documentation:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
What is strange about this problem is that some bootstrap styles will load and others will not. For example, the bg-primary class is loaded but the bg-dark and bg-light are not, and this problem is still present when I make a new rails app and follow the tutorial again. Let me know what I am missing from this tutorial or if there is anything else that is needed to see to solve the issue.
If you are looking for bootstrap for rails 6 then, this will do.
First of all, this is not a duplicate! It's the same 'not defined' error but follows exactly the github (https://github.com/reactjs/react-rails) guide and still not working
Gemfile:
gem 'rails'
gem 'pg', '~> 0.15'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'therubyracer'
gem 'bootstrap-sass'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'font-awesome-sass'
gem 'sprockets-rails'
gem 'react-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components
application.html:
<!DOCTYPE html>
<html>
<head>
<title>project</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'react' %>
<%= csrf_meta_tags %>
</head>
<body>
components/app.js.jsx:
// var React = window.ReactRailsUJS;
var Hello = React.createClass({
render: function() {
return (
<p>Hello</p>
);
}
});
ReactDOM.render(
<Hello />,
document.getElementById("react-msg")
);
console.log(1);
html file:
<style type="text/css">
h1, h3 {
font-weight: bold;
}
</style>
<div class="container">
<h1>React JS</h1>
<h3 id="react-msg"></h3>
</div>
development.rb:
Rails.application.configure do
...
# config/environments/development.rb
config.react.variant = :development
# to include react add-ons
config.react.addons = true # defaults to false
end
When I visit the page it says
ReferenceError: React is not defined
What I did wrong?
If I uncomment the following
var React = window.ReactRailsUJS;
it says createClass is not a function and same for every other React function
For anyone that runs onto this issue and lands here, apparently it is a problem beginning with version 16 onward of React. The reason is cause React.createClass is deprecated. Instead, you're supposed to use createReactClass.
Much of the (now old) documentation provided an example like this:
var HelloMessage = React.createClass({
render: function() {
return (
<h1>Hello {this.props.name}!</h1>
)
}
});
Instead, you should use this:
var HelloMessage = createReactClass({
render: function() {
return (
<h1>Hello {this.props.name}!</h1>
)
}
});
I can only assume they didn't update their examples, and many of them are still showing up when you search for react-rails as of Nov-2017.
I've added to gemfile, bundle installed and bundle updated twitter-bootstrap-rails gem and all of the dependency gems that i need as per here, yet none of the styles in my layout file a rendering? Can anyone see what I'm doing wrong or perhaps whether i'm missing an important require somewhere?
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.1'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'devise'
gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'rspec-rails'
end
group :test do
gem 'capybara'
gem 'pry-rails'
gem 'shoulda-matchers', github: 'thoughtbot/shoulda-matchers'
end
stylesheets/application.css:
/*
* 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 any plugin's vendor/assets/stylesheets directory 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 bootstrap_and_overrides
*= require_tree .
*= require_self
*/
stylesheets/bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
#import "fontawesome/font-awesome";
// Glyphicons
//#import "twitter/bootstrap/glyphicons.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// #link-color: #ff0000;
javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
layouts/application.html.erb:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Odot2</title>
<!-- Latest compiled and minified CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Odot2</a>
</div>
<div class="user-links collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li role='presentation'><%= link_to('Logout', destroy_user_session_path,
:method => :delete) %></li>
<li role='presentation'><%= link_to('Edit registration',
edit_user_registration_path) %></li>
<% else %>
<li role='presentation'><%= link_to('Login', new_user_session_path) %></li>
<li role='presentation'><%= link_to('Register', new_user_registration_path) %></li>
<% end %>
</ul>
</div>
</div>
</nav>
<div class="flash panel">
<% flash.each do |type, message| %>
<div class='<%= build_alert_classes(type) %>'>
<%= message %>
</div>
<% end %>
</div>
<main>
<div class="container-fluid">
<%= yield %>
</div>
</main>
</body>
</html>
I used the Bootstrap-sass gem and it works fine.
gem 'bootstrap-sass'
//= require bootstrap
and then in a file called "Bootstrap_and_customization.css.scss" I have:
#import url(http://fonts.googleapis.com/css?family=Lato:400,700);
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
I've been trying to connect bootstrap framework to my project by following this documentation and I can't set it up for some reason.
Why is it?
assets/stylesheets/application.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 any plugin's vendor/assets/stylesheets directory 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.
*
#import "bootstrap-sprockets";
#import "bootstrap";
*
*= require bootstrap3-editable/bootstrap-editable
*= require_tree .
*= require_self
*/
assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap3-editable/bootstrap-editable
//= require_tree .
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Greenbull</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="container">
<div id="user_header">
<% if current_user %>
Logged in as <%= current_user.full_name %>
<%= link_to "Log Out", logout_path("current"), method: 'delete' %><br />
<p><%= link_to "My tasks", user_tasks_path(current_user) %>
<% else %>
<%= link_to "Sign Up", signup_path %> or
<%= link_to 'Log In', login_path %>
<% end %>
</div>
<% flash.each do |message_type, message| %>
<div class="flash-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
</body>
</html>
Gemfile
source 'https://rubygems.org'
group :development, :test do
gem 'rspec-rails', '~> 3.0'
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.3'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# 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
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'bcrypt'
gem 'pry'
gem 'pg'
gem 'bootstrap-x-editable-rails'
gem 'bootstrap-sass'
end
I have installed bootstrap-sass 3.3.5.1, sass-rails 5.0.3.
Any help?
Read the instructions of the bootstrap-sass gem and follow their conventions https://github.com/twbs/bootstrap-sass.
Import Bootstrap styles in app/assets/stylesheets/application.scss:
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
I am unable to get bootstrap to work in my layout, I can't seem to figure out why. I did rm app/assets/stylesheets/application.css
Any help would be much appreciated.
Gemfile
source 'https://rubygems.org'
ruby '2.1.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0.beta2'
# Use postgresql as the database for Active Record
gem 'pg'
gem 'rails_12factor', group: :production
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0.0.beta1'
# 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', '~> 4.0.0.beta2'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# 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
group :development, :test do
# Call 'debugger' anywhere in the code to stop execution and get a debugger console
gem 'pry-rails'
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0.0.beta4'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
app/assets/stylesheets/custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>THE BLOGGER</title>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<nav>
<ul class="nav navbar-nav pull-right"></ul>
</nav>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
You should not remove the application.css manifest file. You should, however, change it's name to application.css.scss. This way it can be preprocessed by SASS.
If you are including the imports for bootstrap in a separate file as you do in your example (custom.css.scss), you must ensure that this file are included in the application manifest. The require_tree directive that is included by default does this (you need to have the file located in the /stylesheets directory, like you do):
#application.css or application.css.scss
*= require_tree .
However, since you are using SCSS, I recommend the following approach:
#application.css.scss
#...
#all your files and directives
#...
#import "bootstrap-sprockets";
#import "bootstrap";
This way, it is not necessary to have a separate file like custom.css.scss