为了安装 bootstrap-sass gem，我是否从 application.scss 中删除 *= require_self 或将其替换为 import '@require_self'答案

【问题标题】：For installing bootstrap-sass gem do I remove *= require_self from application.scss or replace it with import '@require_self'为了安装 bootstrap-sass gem，我是否从 application.scss 中删除 *= require_self 或将其替换为 import '@require_self'
【发布时间】：2016-03-18 02:08:48
【问题描述】：

我正在安装bootstrap-sass gem，而与 application.scss 相关的这一行让我感到困惑。

'然后，删除所有 *= require_self 和 *= require_tree 。 sass 文件中的语句。相反，使用 @import 导入 Sass 文件。'

我是删除*= require_self 和*= require_tree . 并用import '@require_self' 和import '@require_tree .' 替换它们还是直接删除它们。

同样适用于 application.scss 中的任何其他导入文件，例如

 *= require dataTables/jquery.dataTables
 *= require froala/froala_editor.min.css

我应该把它们改成

 @import 'dataTables/jquery.dataTables'
 @import 'froala/froala_editor.min.css'

只是感到困惑，想确认一下在这里做什么。

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-4 rubygems bootstrap-sass

【解决方案1】：

在使用 bootstrap-sass 时，从您的 application.scss 中删除所有内容，然后添加以下内容：

#"bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

如果你想加载额外的 scss/sass 文件，你可以 @import 到application.scss
如果你想加载 css 文件，你可以像下面这样*= require它们：

/*
*= require_self
*= require your_css_file
*/
@import "bootstrap-sprockets";
@import "bootstrap";

【讨论】：

好的，所以在 sass 文件上使用 @import，在 css 文件上使用 *= require。对吗？

【解决方案2】：

我在使用 Bootstrap 4 Ruby Gem for Rails https://github.com/twbs/bootstrap-rubygem 时遇到了类似的问题。它的指令还包含以下短语：

然后，删除所有 *= require 和 *= require_tree 语句萨斯文件。相反，使用 @import 导入 Sass 文件。

不要在 Sass 中使用 *= require 否则你的其他样式表将不会能够访问 Bootstrap mixins 和变量。

这是一个矛盾。

如果我按照他们告诉我的去做 - 这意味着我失去了在开发过程中取消将所有 (s)css 文件捆绑到单个 application.scss（以及浏览器中的单个 application.css）的机会阶段。如果我在application.css 中手动导入我的所有 scss 文件——这意味着我将每个文件的内容注入到一个更大的文件中，并且 Sprockets 不再控制这种捆绑——就像我手动执行的那样。而且我不喜欢它——在开发阶段，因为我无法清楚地看到这种风格来自哪个css-file。

所以我选择了另一个选项 - 我保持 application.css 不变，然后我创建了一个 bootstrap_code.scss 文件（未能将其命名为 bootstrap.scss，因为它混淆了 Rails），其中包含 @import "bootstrap"; 指令，最后我创建了一些z.scss 我自己的样式文件 - 只是为了确保它们会出现之后相同的引导样式。

当然，我的解决方案有这样一个缺点，我的scss-files 不能

访问 Bootstrap mixins 和变量

（因为 Sprockets 将它们转换为 css 使它们没有机会首先进入 Bootstrap scss），但是因为我只需要来自 Bootstrap 的普通 css 就可以了。

当然，在生产阶段，如果我真的需要 Bootstrap mixins 和变量（我通常不需要)。

【讨论】：