Rails 3 + Twitter Bootstrap + SASS 设置答案

【问题标题】：Rails 3 + Twitter Bootstrap + SASS setupRails 3 + Twitter Bootstrap + SASS 设置
【发布时间】：2012-11-09 22:17:19
【问题描述】：

我正在尝试追踪一些棘手的交互。这是场景：

我正在使用 sass-twitter-bootstrap github 存储库。我已将完整的 scss 文件集复制到我的 assets/twitter 目录中

当我的 application.css 看起来像这样时：

*= require_self
*= require twitter/bootstrap
*= require_tree .

刷新主页给我这个错误：

Undefined variable: "$baseLineHeight".
  (in /Volumes/MonsterHD/mydev/repsurv/app/assets/stylesheets/twitter/_accordion.scss)

当我的 application.css 看起来像这样时：

*= require_self
*= require twitter/bootstrap

然后我没有收到错误，但我的 custom.css.scss 没有应用。

而我的 custom.css.sccs 看起来像这样：

@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;
}

这是我的 gem 文件：

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

【问题讨论】：

你在 custom.css.sccs 中写了@import "twitter/bootstrap"; 吗？
是的。检查上面，我修复了一个格式错误:)我还做了一个 assets:clean 和 precompile 但没有帮助。
不要在开发中预编译资产，因为这可能会让您相信您在开发中加载的文件（延迟编译）不起作用......因为编译的资产可以优先-- 你会有两份。

标签： ruby-on-rails sass bootstrap-sass

【解决方案1】：

您不想要*= require_tree .，正如您所见，它需要一切。你想要*= require_directory .，它只需要目录根目录中的文件（即它不会下降到子目录）。

作为另一种方法，这是我在最近的项目设置中使用的方法，例如您的：

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

然后我的 content.css.scss 包含我所有的应用程序特定的东西。

【讨论】：