I am trying to track down some tricky interactions. Here's the scenario:
When my application.css looks like this:
*= require_self
*= require twitter/bootstrap
*= require_tree .
Refreshing the home page gives me this error:
Undefined variable: "$baseLineHeight".
(in /Volumes/MonsterHD/mydev/repsurv/app/assets/stylesheets/twitter/_accordion.scss)
When my application.css looks like this:
*= require_self
*= require twitter/bootstrap
Then I get no error, but my custom.css.scss is not applied.
And my custom.css.sccs looks like this:
@import "twitter/bootstrap";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
}
#logo:hover {color: #fff;
text-decoration: none;
}
Here is my gem file:
source 'https://rubygems.org'
gem 'rails'
gem 'american_date'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'jquery-rails'
gem 'sass-rails'
group :development, :test do
gem 'sqlite3'
gem 'hirb'
gem 'pry'
gem 'pry-rails'
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'
end
group :development, :test do
gem 'rspec-rails'
gem 'factory_girl_rails'
end
group :test do
gem 'capybara'
gem 'faker'
gem 'launchy'
end
group :production do
gem 'pg'
end
You don't want *= require_tree .
as that will, as you've seen, require everything. You want *= require_directory .
which will only require files in the root of the directory (ie. it won't descend into sub directories).
As another approach, this is what I used in a recent project setup like yours:
application.css.scss:
/*
*= require_self
*/
$logo_green: #3b5263;
@import 'smoothness/jquery-ui-1.8.21.custom.css';
@import 'bootstrap_and_overrides.css.scss';
@import 'content.css.scss';
bootstrap_and_overrides.css.scss:
// Set the correct sprite paths
$iconSpritePath: image-url('glyphicons-halflings.png');
$iconWhiteSpritePath: image-url('glyphicons-halflings-white.png');
// override bootstrap colors
$linkColor: lighten(#355c74, 10%);
@import 'bootstrap';
body { padding-top: $navbarHeight + 10px; }
@import 'bootstrap-responsive';
....
And then my content.css.scss contains all my app specific stuff.