Just upgraded to bootstrap 4.
In the old version I was using #import bootstrap on my app/assets/stylesheets/custom.scss file and thus customizations worked fine.
Now, following the getbootstrap.com Get Started guide, I have included #import bootstrap in my application.scss and customizations have stopped working.
Here's my gemfile;
gem 'rails', '5.1.4'
gem 'bcrypt', '~> 3.1.7'
gem 'faker', '1.7.3'
gem 'will_paginate', '3.1.6'
gem 'bootstrap-will_paginate', '1.0.0'
gem 'puma', '3.9.1'
gem 'uglifier', '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.7.0'
gem 'coffee-script-source', '1.8.0'
gem 'letsencrypt_plugin', '~> 0.0.10'
gem 'etsy', '~> 0.3.2'
gem 'bootstrap', '~> 4.0'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
gem 'popper_js', '~> 1.12', '>= 1.12.9'
My application.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, 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 other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
#import "bootstrap"
Here's what I'm trying to get to work in custom.scss:
body {
padding-top: 60px;
background-color: $light-gray!important;
}
Thanks in advance :)
Аfter #import, a semicolon is missing. Make sure that the variable $light-gray is also defined. I think #import with bootstrap 4 version works pretty the same as for bootstrap 3.
Related
I was trying to add bootstrap to my Rails app reading a tutorial, and I got the error below. Please explain what happened, and please do edit my code to show how to fix. And any resources on Rails which you would refer to get better at it will be appreciated.
P.s. I'm just starting. Thank you for the read. :D
:
Page: http//localhost:3000/posts
Error:
Sass::SyntaxError in Posts#index
File to import not found or unreadable: bootstrap. Load paths:
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
Rails/training/app/assets/config /Users/mac/Documents/Projects/Web
Development/Ruby On Rails/Jump Start Rails/training/app/assets/images
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
Rails/training/app/assets/javascripts
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
Rails/training/app/assets/stylesheets
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
Rails/training/vendor/assets/javascripts
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start
Rails/training/vendor/assets/stylesheets
/Users/mac/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.2.1/vendor/assets/javascripts
/Users/mac/.rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts
/Users/mac/.rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled
/Users/mac/.rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts
Extracted source (around line #5):
// #import "bootstrap-responsive";
#import "bootstrap";
#import "bootstrap-responsive";
// body {
Rails.root: /Users/mac/Documents/Projects/Web Development/Ruby On
Rails/Jump Start Rails/training
Application Trace | Framework Trace | Full Trace
app/assets/stylesheets/custom.css.scss:5
app/views/layouts/application.html.erb:7:in
`_app_views_layouts_application_html_erb___3077022213198936014_70226475759060'
Request
Parameters:
None
Toggle session dump Toggle env dump Response
Headers:
None
Git Repo of files : https://github.com/ScarletMcLearn/training
The code of "application.html.erb" file (If required):
<!DOCTYPE html>
<html>
<head>
<title>Training</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
The code of application.js file (if needed):
// 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 bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
The contents of the Gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# 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.2'
# 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 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', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
# 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', platform: :mri
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console'
gem 'listen', '~> 3.0.5'
# 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
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
My "application.css" 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 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 other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
My "custom.css.scss" file:
// #import "bootstrap";
// #import "bootstrap-responsive";
//=reqire_self
#import "bootstrap";
#import "bootstrap-responsive";
// body {
// padding-top: 60px;
// padding-bottom: 40px
// }
// .sidebar-nav {
// padding: 9px 0;
// }
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
My 'application.js' file:
// 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 bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require twitter/bootstrap
My Gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# 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.2'
# 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 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', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
gem 'sass-rails', '~> 5.0'
gem 'twitter-bootstrap-rails'
# 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', platform: :mri
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console'
gem 'listen', '~> 3.0.5'
# 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
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Did you add the following to your Gemfile and run bundle install after that?
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
rails uses sprockets framework in order to pre-process assets, which includes stylesheets, javascripts and images. While pre-processing, when it encounters #import "bootstrap";, it traverses through the asset path directories in order to find the imported bootstrap directory or file. Based on the error you are encountering, looks like the sprockets engine is not able to find the bootstrap.
Make sure you have included the bootstrap-sass in your Gemfile and run bundle install to see if the error goes away.
Do this:
application.css.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.
*
*= require_self
*/
application.css
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
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 turbolinks
In that specific order!
Gemfile.rb
gem 'sass-rails', '~> 5.0'
gem 'twitter-bootstrap-rails'
Make sure you have these 2 gems in your gemfile, outside of any groups. Then run bundle install
I'm having problems with my app, I can't see any bootstraps effects on my rails app it looks the same. I have done bundle install, but I can't see any difference in it. This is my first time using bootstrap.
Here is my gem file:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.5.1'
gem 'bootstrap-sass', '~> 3.3.6'
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
gem 'sqlite3'
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
end
group :development do
# 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'
end
group :production do
gem 'pg'
gem 'rails_12factor'
And 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.
//
// 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 .
And my 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_tree .
*= require_self
*/
You need to add the boostrap in your application.scss too.
Just follow the documentaion: https://github.com/twbs/bootstrap-sass#installation
#import "bootstrap-sprockets";
#import "bootstrap";
Note: rename your application.css to application.scss
I am using Ruby -v 2.2.1 and Rails version 4.2.4 with gems haml, simple_form, and bootstrap-sass indicated below. I consistently get the following error:
Sprockets::FileNotFound in Static_page#index
The error also indicates that it could not find my file in javascript/application, more specifically this is what I have app/assets/javascripts/application.js:
//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets
In addition, I have these included as well in application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I also have the following included in my application.css.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
And here are the gem files I am using:
gem 'rails', '4.2.4'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'haml', '~> 4.0', '>= 4.0.7'
gem 'simple_form', '~> 3.2', '>= 3.2.1'
gem 'bootstrap-sass', '~> 3.3.6'
group :development, :test do
gem 'byebug'
end
group :development do
gem 'web-console', '~> 2.0'
gem 'spring'
end
I have already conducted a bundle install and restarted my rails sever several times to try to troubleshoot.
Why does this error keep occurring and might there be some kind of incompatibility with my gems' versions? Thank you.
The error simply states that it cannot find the JS file which has been called in application.js.
According to the docs, you need to have the following in your JS pipeline to get it working:
//= require jquery
//= require bootstrap-sprockets
Referencing bootstrap-sass/assets/javascripts/bootstrap-sprockets seems to violate that pattern (remember, asset_path acts like a PATH env var -- you can reference individual files without the relative path).
For me, this happened after upgrading to rails 7, and was because rails 7 doesn't come with Sprockets.
I fixed by adding sprockets and everything worked:
# Gemfile
gem "sprockets-rails"
More info here
I downloaded the SpaceLab theme from sass-bootswatch.theblacksmithhq.com and in part of the file it has
// FORMS
// -----------------------------------------------------
.control-group.warning {
#include formFieldState(#E29235, #E29235, $warningBackground);
}
.control-group.error {
#include formFieldState(#C00, #C00, $errorBackground);
}
.control-group.success {
#include formFieldState(#2BA949, #2BA949, $successBackground);
}
// DROPDOWNS
// -----------------------------------------------------
When I run rake assets:precompile or just put up a rails server I get this error Undefined mixin 'formFieldState'.
This began after I added active admin. My application.css file looks like this by the way.
*= require_self
*= require variables
*= require base
*= require devise
*= require nav
*/
I can remove the section from the variables file and it will run but my styles look really bad almost like bootstrap is not running.
My Gemfile looks like this:
gem 'rails', '3.2.13'
gem 'devise'
gem 'omniauth-google-oauth2'
gem 'decent_exposure'
gem 'turbolinks'
gem 'simple_form'
gem 'activeadmin'
gem "meta_search", '>= 1.1.0.pre'
gem 'jquery-rails'
#TODO needed for the server
gem 'mysql'
group :production do
# needed for heroku
#gem 'pg'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'sass-rails'
gem 'bootstrap-sass'
#TODO needed for the server
#gem 'execjs'
#gem 'therubyracer'
end
group :development, :test do
gem 'certified'
gem 'better_errors'
gem 'factory_girl_rails'
gem 'pry-rails'
gem 'pry-stack_explorer'
gem 'pry-debugger'
gem 'awesome_print'
gem 'quiet_assets'
gem 'rspec-rails'
gem 'heroku'
end
group :test do
gem 'sqlite3'
end
If there is anything else that would help you understand please let me know.
I have two explanations - I think both of them apply to you:
You have not specified a version for the 'bootstrap-sass' gem in your Gemfile. Your SpaceLab theme seems to be based on Bootstrap 2 while the current version of the 'bootstrap-sass' gem is 3.0.2.1, which ships Bootstrap 3.0.2, which is not compatible with SpaceLab (and the mixin doesn't exist anymore). Maybe you "accidentally" upgraded bootstrap-sass when installing Active Admin.
Another problem is accessing SASS variables and mixins when using the Asset Pipeline (Sprockets), as described here. If you use //=require for importing stylesheets (e.g. for importing Bootstrap and your theme from separate files in your application.css) you cannot access SASS variables and mixins between files because Sprockets compiles each file separately. The only option you have is to import Bootstrap and your theme via the Sass #import one after another in one SASS file to make sure they're able to access each others' variables and mixins, like (just exemplarily):
#import "spacelab-variables";
#import "bootstrap";
#import "spacelab-theme";
I try to use bootswatch-rails, but it doesn't work well, for example, button doesn't appear right, not like on the bootwatch site, that show.
I put bootstrap-sass and bootswatch in my gemfile and bundle install
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'bootswatch-rails', '>=0.2.0'
gem 'uglifier', '>= 1.0.3'
end
gem 'bootstrap-sass', '>= 2.1.0.0'
and in my bootstrap_and_overrides.css.scss file looks like this
// First import journal variables
#import "bootswatch/cerulean/variables";
// Then bootstrap itself
#import "bootstrap";
// Responsive styles go here in case you want them
#import "bootstrap-responsive";
// And finally bootswatch style itself
#import "bootswatch/cerulean/bootswatch";
I really don't know what I do wrong.
do you have any other css files being imported that you aren't taking into consideration such as scaffold.css (when you generate a resource via the scaffold command)?