17

So I've got a relatively simple Rails app, and I wanted to add some material design styling to it through Bootstrap.

I've added the following gems to my Gemfile:

gem 'bootstrap-sass'
gem 'bootstrap-material-design'

Now they both work, my question is to why I seem to have to add them to my app in different ways. For vanilla Boostrap I just import it into the view specific (I think that's the right term) scss file like normal.

@import "bootstrap-sprockets";
@import "bootstrap";

But for the Material Design gem I have to 'require' it to the root application.css file instead

 *= require bootstrap-material-design

Why the difference, and what is that require syntax actually doing?

Taylor Huston
  • 1,104
  • 3
  • 15
  • 31
  • Have a look at this: http://stackoverflow.com/questions/6074173/should-i-use-import-or-manifest-files – zenw0lf Oct 05 '16 at 19:40

2 Answers2

11

I guess you understand the purpose of the CSS/SASS @import option. require is sprockets directive. Sprockets processes directives during compile session - simple concatenation of required files. The only difference is how they handle (share) context. In a nutshell - use always @import to be safe.

Please, look details description here: https://github.com/rails/sass-rails#important-note

Tensho
  • 763
  • 1
  • 7
  • 23
8

I was having a problem with very slow recompiles whenever I changed my CSS. According to this article, the difference between a Sprockets require and a Sass @import is a significant one, at least in terms of performance:

The asset pipeline treats Sass @imports differently that it treats Sprockets. In the case of imports, each save will go through and compile all the imports each time, no matter which partial you’ve saved. The way that Sprockets are treated inside stylesheets is that only the partial you’ve saved will recompile and then be injected onto the page locally when you refresh. Sprockets are the default way of loading multiple partials into a single file for production.

By using require for my third-party vendor dependencies, CSS recompilation now takes 1.5 seconds instead of 25 seconds.

jabbett
  • 582
  • 1
  • 7
  • 20