Rails - Difference between @import and *= require?

Question

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?

Answer 1

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