Rails - @ import和*= require之间的区别？

Question

所以我有一个相对简单的Rails应用程序,我想通过Bootstrap添加一些材料设计样式.

我已经将以下宝石添加到我的Gemfile中:

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

现在他们都工作,我的问题是为什么我似乎必须以不同的方式将它们添加到我的应用程序.对于vanilla Boostrap我只是将它导入特定视图(我认为这是正确的术语)scss文件就像正常一样.

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

但是对于Material Design gem,我必须将它"'需要'到root application.css文件中

 *= require bootstrap-material-design

为什么差异,这需要语法实际做什么？

Answer 1

我想你明白了CSS/SASS @import选项的用途.require是sprockets指令.Sprockets在编译会话期间处理指令 - 简单连接所需文件.唯一的区别是它们如何处理(共享)上下文.简而言之 - 始终使用@import是安全的.

请在此处查看详细说明:https: //github.com/rails/sass-rails#important-note

Answer 2

每当更改CSS时，我都会遇到非常慢的重新编译问题。根据本文，链轮require和Sass 之间的区别@import是很大的，至少在性能方面：

资产管道对待Sass @imports的方式与对待Sprockets的方式不同。对于导入，无论您保存了哪个部分，每次保存都会遍历并编译所有导入。在样式表中对待Sprockets的方式是，只有保存的部分才会重新编译，然后在刷新时注入到本地页面上。链轮是将多个部分加载到单个文件中以进行生产的默认方式。

通过使用require我的第三方供应商依赖性，CSS重新编译现在只需1.5秒，而不是25秒。