Question

我正在安装bootstrap-sass gem并将此行与application.scss混为一谈。

＆＃39;然后，删除所有* = require_self和* = require_tree。来自sass文件的语句。相反，使用@import导入Sass文件。＆＃39;

我是否要移除*= 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'

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

Answer 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";

Answer 2

我遇到了与Bootstrap 4 Ruby Gem for Rails https://github.com/twbs/bootstrap-rubygem类似的问题。其说明还包含以下短语：

然后，从中删除所有* = require和* = require_tree语句   Sass文件。而是使用@import导入Sass文件。

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

这是一个矛盾。

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

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

当然，我的解决方案有一个缺点，即我的z.scss - 文件不能

访问Bootstrap mixins和变量

（因为Sprockets将它们转换为scss，让他们没有机会首先潜入Bootstrap css，但是因为我只需要一个来自Bootstrap的普通scss即可。

当然在生产阶段我可以回到gem文档中描述的推荐方法（“删除所有* = require ...”）我是否真的需要Bootstrap mixins和变量（我通常不需要的东西））。

为了安装bootstrap-sass gem，我从application.scss中删除* = require_self，或者用import＆＃39; @ require_self＆＃39;替换它。

2 个答案: