Rails 3 + Twitter Bootstrap + SASS设置

试图追踪一些棘手的交互。也许你可以看到我错过的东西。感谢您花点时间看看这个！这里是场景：Rails 3 + Twitter Bootstrap + SASS设置

我正在使用sass-twitter-bootstrap github回购。已经复制了一套完整的SCSS文件到我的资产/ 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; 
}

这里是我的宝石文件：

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

来源

2012-11-21 pitosalas

你写了'@import“twitter/bootstrap”;'在你的custom.css.sccs中？ –

是的。上面的CHeck，我修正了一个格式错误:)我也做了一个资产：清理和预编译，并没有帮助。 – pitosalas

不会对开发中的资源进行预编译，因为这可能会导致您认为您在开发中加载的文件（懒编译）无法正常工作......因为编译的资源可能优先 - 您将拥有两个副本。 –

你不想*= 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包含我所有的应用程序特定的东西。

来源

2012-11-21 17:08:14

Rails 3 + Twitter Bootstrap + SASS设置

回答

相关问题