1

I am using bootstrap-sass in a Rails application. So far, everything has worked fine, but I have just tried to import another third-party sass file that uses bootstrap variables and it cannot see them.

In my application.css.scss

*= require bootstrap_local

In bootstrap_local.css.scss

@import "bootstrap";
@import "bootstrap-social";

When I do a page access, I get a Rails error

Undefined variable: "$line-height-computed".
(in .../app/assets/stylesheets/bootstrap-social.scss:11)

The variable needed by bootstrap-social.scss is defined in the previously imported bootstrap file (in fact it's defined in a partial bootstrap/variables that it includes).

As far as I understand, this should work because bootstrap_local is required, which means that everything in it is compiled together in one scope, so everything imported into bootstrap_local is treated as being one large file. Perhaps I have this wrong?

If I throw an @import "bootstrap"; into bootstrap-social.scs then it works fine. But I should not need to do this, so I either doing something wrong or I there is some misconfiguration with my setup.

What do I need to do to fix this?

Gems:

  • bootstrap-sass-3.1.1.1
  • sass-rails-4.0.3

System:

  • Rails 4.0.1
  • ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-linux]

(Bootstrap Social is a set of social sign-in buttons made in pure CSS based on Bootstrap and Font Awesome.)

starfry
  • 9,273
  • 7
  • 66
  • 96
  • Possible duplicate: http://stackoverflow.com/questions/17976140/false-positive-undefined-variable-error-when-compiling-scss – cimmanon Jul 16 '14 at 12:25
  • I read that. Specifically [this](http://stackoverflow.com/a/17976934/712506) which mentioned renaming the file with an underscore prefix but it made no difference. I will have another go, however... – starfry Jul 16 '14 at 12:31

1 Answers1

0

The problem described in the question can be resolved by changing the application.css.scss manifest to use import instead of require:

@import "bootstrap_local";

It is also necessary to remove any require_tree . from the manifest because it would otherwise require the same bootstrap_local file because it lies in its path.

On reflection, not having require tree . in the manifest is probably wise because it prevents unwanted files from being included. I only had it there because it's there by default in a new Rails project (the same goes for require_self; it's cleaner not to put that in the manifest).

In reference to the suggestion about prefixing the file with an underscore, this is a good thing to do when the you don't need file, like bootstrap-social in the question, to be a compiled into a separate CSS file. So, I did end up renaming it to _bootstrap-social.scss.

starfry
  • 9,273
  • 7
  • 66
  • 96