I have followed the bootstrap-rubygem setup directions. Everything works except when I try to access variables like $black and $white I get a Sass::SyntaxError of Undefined variable. I've been googling this for the past 4 hours. Is there something that I need to turn on? I used to do this successfully with rails 4.2 and bootstrap 3 years a couple years ago, but now I'm at a loss.
Gemfile
source 'https://rubygems.org'
git_source(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.2'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.3.18', '< 0.5'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# 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 'therubyracer', platforms: :ruby
gem 'slim-rails'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
gem 'jquery-rails'
gem 'sprockets-rails'
# 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', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# 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', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
# gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 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
application.scss
$body-bg: $black;
#import "bootstrap";
application.js
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
I was able to get the variables working in my custom files by using the following manifest file
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, 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_self
*/
#import "bootstrap";
#import "custom";
As per the bootstrap gem instructions, I had to remove require_tree, but require_self seems to be ok.
With this in place, you have access to $text-muted or $brand-primary inside custom.scss.
Presumably you can define your custom colors in that file as well.
$body-bg: $black;
$body-color: $white;
Or better yet, define a _custom_variables.scss file and import that before your custom css files.
#import "bootstrap";
#import "custom_variables";
#import "custom";
If you want to redefine the bootstrap variables before bootstrap uses them, then use the order
#import "custom_variables";
#import "bootstrap";
#import "custom";
However, be aware that any custom bootstrap sass methods will blow up, (i.e. darken()) unless you import bootstrap first. So, you can't just import the entire bootstrap variables first. (tried and failed!)
From what I can tell the docs are wrong. If you have the application.scss like so:
/*
* 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.
*
*= require_tree .
*= require_self
*/
and put
#import bootstrap
at the top of the scss file you compose, you can make things work.
static_pages.sass:
// Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
$body-bg: green
#import bootstrap
body > div > p
color: $red
all of that will work. Passing one variable into another though does not seem to work.
EDIT FOR CLARITY:
If you are using scss as the file extention for the static_pages css file the code css markup is a bit different.
// Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
#import 'bootstrap';
// $red: #800000;
p {
color: $red;
}
If all else fails you can clone this app and it will work.
Figured it out. This is straight from the horse's mouth. You need to download the _bootstrap-variables.scss file from here and place it inside app/assets/stylesheets.
Uncomment the variables you want to use (e.g. $black, $white, etc.)
Then, application.scss should look like:
/*
* 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.
*
*= require_tree .
*= require_self
*/
#import "bootstrap-variables";
$body-bg: $black;
$body-color: $white;
#import "bootstrap";
I have the following entries my (Rails 3.2.13) Gemfile:
gem 'twitter-bootstrap-rails'
gem 'bootstrap-sass'
and in app/assets/javascripts/application.js:
//= require twitter/bootstrap
and at the top of app/assets/stylesheets/custom.css.scss:
#import 'bootstrap'
Is this "correct"? Do I need both 'twitter-bootstrap-rails' and 'bootstrap-sass' (or maybe 'bootstrap-sass-rails'), or are they redundant and possibly conflicting? Do the 'bootstrap-sass' gems include the javascript for the framework, or only the CSS?
No you do not need both.
Just simply put this in your gemfile:
gem 'sass-rails'
gem 'bootstrap-sass'
This in application.css.scss:
#import 'bootstrap';
#import 'bootstrap-responsive';
This in application.js
//= require bootstrap
If you're still having problems you may need to look at the ordering of things in your manifest files..
If you want to use SASS you should use boostrap-sass or bootstrap-sass-rails. Twitter-bootstrap-rails uses LESS source. If you were to include both there would probably be conflicts. All of them include javascript for bootstrap already and integrate into the asset pipeline.
I personally use LESS version as it is what bootstrap is originally written in. (might get faster releases when bootstrap updates)
It's generally good to check the gems out on github to evaluate your exact needs and which version of Rails they support.
Using Rails 3.2 trying twitter bootstrap and using formtastic-bootstrap with these gems as I found recommended
gem 'formtastic', git: 'git://github.com/justinfrench/formtastic.git', branch: '2.1-stable'
gem 'formtastic-bootstrap', git: 'git://github.com/cgunther/formtastic-bootstrap.git', branch: 'bootstrap2-rails3-2-formtastic-2-1'
If I require them in the manifest in application.css then they work and forms get the twitter styles however I want to override some of the colours so I know I need to use #import so I can override the $ vars.So I have put this in application.css after the manifest
#import 'twitter/bootstrap';
#import 'formtastic-bootstrap.css';
I can see these files have been got by the browser but the styles are not being applied
What am I getting wrong?
Sorry! as I was upgrading a rails 3.1 app I did not see that application.css was application.css not application.css.scss! My bad! Now that sass sees the #import as its own instruction and not a css #import it works as expected.
My setup is fairly simple default rails 3.2.1 setup. All my .css.sass files are in /app/assets/stylesheets/. I have the sass-rails '~> 3.2.3' gem in :assets group.
There's no application.css, just main.css.sass (used for main layout).
When i issue:
RAILS_ENV=production bundle exec rake assets:precompile
it compiles my coffeescripts and javascripts. There are no error messages in the log. It's like it doesn't even try to compile sass files.
The main.css.sass file header looks like this:
//=depend_on "_globals.css.sass"
#import globals
The _glocals.css.sass exists in the same directory.
James is right and it's one of the possible solutions.
The drawback of adding all files to one manifest file is that all will be precompiled to single file - which isn't always what you want.
In my case I needed separate files (one file for each layout).
Heres how to add new manifest files:
config.assets.precompile += %w( file1.css file2.css )
You don't need to have actual file1.css, if you have file1.css.sass it will be precompiled.
I think sass needs a manifest file and by default that's application.css for a rails 3.2 app. So creating application.css and //= require 'main' might dove your problem.
This seems quite trivial but couldnt find it in the forums or rails asset pipeline guides.
In short
How can I inform sprockets to skip the asset pipeline for the jquery ui css of the 'jquery-rails' gem.
In long:
I am trying to use 'jquery-rails' gems with the Google jquery CDN's.
Hence in the I am just including the jquery_ujs and adding the jquery related scripts in the application layout:
application.js.erb:
//= require bootstrap-twipsy.js
//= require jquery-glowing
//= require jquery_ujs
application.html.erb:
= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jqueryui.min.js"
For the css', I am not including the jquery-ui css in the application.css and adding it in the layouts file too.
application.css.scss.erb:
*= require_directory .
*= require active_scaffold
*= require_self
In production environment, the compiled css file includes the jquery-css code too, since its in the assets pipeline of the 'jquery-rails' gem.
So how can I inform sprockets to skip the asset pipeline for the jquery ui css of the 'jquery-rails' gem.
If this is not possible in rails, what is the best way to handle this sittuation.
I thought about removing the jquery-rails gem, and adding the jquery_ujs javascript manually to the system, but then I have to deal with the installation of new releases rather than executing a simple 'bundle update'
Thanks in advance,
The problem is in the active_scaffold gem, right here if you want the code reference. It includes the jquery-ui CSS.
To remove this you'll need to replicate the entire active scaffold css code in your app/assets/stylsheets folder (as my_active_scaffold), removing the link to jquery-ui. I am assuming that the ActiveScaffold erb at the end of the file will still run in this context.
Then just include it:
*= require my_active_scaffold