结合使用Twitter Bootstrap和Rails资产管道以及更少的资源 [英] Using twitter bootstrap with rails assets pipeline and less

问题描述

如何将 twitter-bootstrap-rails gem与资产管道正确集成? /p>

我已经按照安装步骤进行操作，目前我已经有了这个application.css

 *= require_self
 *= require bootstrap_and_overrides

然后在bootstrap_and_overrides.css.less中，我导入其他控制器样式表，以使其与覆盖文件中定义的变量一起使用，并能够在<controller-name>.css.less文件中的控制器特定样式表内使用引导混合. .目前，我正在这样做:

# in bootstrap_and_overrides.css.less
// generated code ...
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;
@linkColor: #ff0000;

// import all other stylesheets
@import 'home.css.less';
@import 'users.css.less';
// and so on, once for every controller

// in home.css.less
#foobar {
    .border-radius(30px); // bootstrap mixin
    color: @linkColor;    // inherited variable 
}

但是，以这种方式，我失去了资产管道，并且在开发模式下也看不到单独的样式表.有什么方法可以使twitter-bootstrap-rails与链轮一起使用?

解决方案

思考twitter-bootstrap-rails gem with the assets pipeline?

I've followed installations steps and currently I have this application.css

 *= require_self
 *= require bootstrap_and_overrides

And then in bootstrap_and_overrides.css.less I'm importing other controllers stylesheets in order to make them work with my variables defined in the overrides file and to be able to use bootstrap mixins within the controller specific stylesheets in <controller-name>.css.less files. Currently I'm doing this:

# in bootstrap_and_overrides.css.less
// generated code ...
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;
@linkColor: #ff0000;

// import all other stylesheets
@import 'home.css.less';
@import 'users.css.less';
// and so on, once for every controller

// in home.css.less
#foobar {
    .border-radius(30px); // bootstrap mixin
    color: @linkColor;    // inherited variable 
}

However in this way I'm losing the assets pipeline and I can't see individual stylesheets anymore in development mode. Is there any way to make twitter-bootstrap-rails working with sprockets?

解决方案

Think this issue on github explains your question. (I know it's for sass, but the explanation should be valid anyway)

In short, using sprockets will compile each file individually which means that you can't use variables and mixins defined by the twitter bootstrap framework. So I guess the answer is no :)

这篇关于结合使用Twitter Bootstrap和Rails资产管道以及更少的资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！