Fabio
Fabio

Reputation: 19196

Using twitter bootstrap with rails assets pipeline and less

How to integrate properly 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?

Upvotes: 4

Views: 3917

Answers (1)

iverds
iverds

Reputation: 283

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 :)

Upvotes: 5

Related Questions