我第一次使用Rails 3(特别是资产流水线和less-rails-bootstrap),所以我可能会遗漏一些非常基本的概念.我已经尝试了两种方法将Twitter引导程序CSS包含到我的项目中,并且两者都有问题.
方法#1：app / assets / stylesheets / application.css需要twitter / bootstrap.这包括使用单独的链接/ href标记的bootstrap css文件,这很好.但是,问题是在我的自定义CSS文件中,比如app / stylesheets / mystyles.css我无法访问在引导代码中定义的变量mixins,如@gray,.Box-shadow等.
方法#2：将@import’twitter / bootstrap’放在app / assets / stylesheets / mystyles.css的顶部.这允许我访问less中定义的变量mixins(在bootstrap代码中),这很好.但问题是,它会将mystyles.css顶部的整个引导程序CSS拉入文件大小.如果有一堆不同的样式表@import twitter / bootstrap会导致很多重复.
处理这种情况的推荐方法是什么？
解决方法
如果您想要专门使用默认的twitter引导变量,那么您的答案就足够了.如果你发现自己想要覆盖变量并将它们应用于两个Twitter bootstrap的样式和你自己的样式,你需要将变量分离到它自己的myvariables.less文件中,并将该文件包含在twitter bootstrap中而不是在清单中.
例
application.css：
/* * Notice we aren't including twitter/bootstrap/bootstrap in here *= require bootstrap_and_overrides *= require mystyles */
bootstrap_and_overrides.less：
# Bootstrap with both bootstrap's variables,and your own @import "twitter/bootstrap/bootstrap"; @import "myvariables";
mystyles.less：
# Your styles with both bootstrap's variables,and your own
@import "myvariables";
h1 {
// Use
color: @textColor;
}
myvariables.less：
@import "twitter/bootstrap/variables"; @textColor: green;