使用 bootstrap-sass 时我应该如何管理 sass 代码？

Posted 2023-03-07

【中文标题】使用 bootstrap-sass 时我应该如何管理 sass 代码？

【英文标题】：How should I go about managing sass code when using bootstrap-sass?

【发布时间】：2015-05-02 21:08:26

【问题描述】：

The documentation 说：

在 app/assets/stylesheets/application.scss 中导入 Bootstrap 样式：

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

bootstrap-sprockets 必须在 bootstrap 之前导入，图标字体才能工作。

确保文件具有 .scss 扩展名（或 .sass 用于 Sass 语法）。如果您刚刚生成了一个新的 Rails 应用程序，它可能会附带一个 .css 文件。如果这个文件存在，它将被提供而不是 Sass，所以重命名它：

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

然后，从文件中删除所有 //= require 和 //= require_tree 语句。相反，使用 @import 来导入 Sass 文件。

不要在 Sass 中使用 //= require ，否则您的其他样式表将无法访问 Bootstrap 混合或变量。

但是如果我按照他们说的做，我的其他样式表将不会像之前那样自动包含在内。我应该在布局中明确包含每个样式表吗？ AFAIU，这也将使我在生产环境中拥有单独的样式表，而不是没有bootstrap-sass 时的样式表。

【参考方案1】：

这里有几件事。首先，默认情况下，每个样式表在开发中在单独的 http 请求中提供，在生产中在一个请求中提供（它们被预编译到一个文件中）。如果我们遵循文档，我们最终也会有一个开发请求，这将抵消仅编译已更改文件的性能优势。 If we don't，我们最终可能会在样式表中多次出现bootstrap。万一我们need some variables or mixinsin several stylesheets.

所以我建议这样：

application.sass（请注意我把require_self放在require_tree .之前）：

/*
 *= require_self
 *= require_tree .
 */
// import bootstrap once
@import "bootstrap-sprockets"
@import "bootstrap"
.d1
    text-align: center

welcome.sass:

// in other files import only some particular partials
@import "bootstrap/variables"
@import "bootstrap/mixins"
.d2
    text-align: right

【参考方案2】：

但是如果我按照他们说的做，我的其他样式表将不会像之前那样自动包含在内。

是的，你是对的。

1) 您不应从 application.scss 中删除您的 require 指令。他们不想使用 require 指令，因为在这种情况下，您无法在包含的文件中使用 SASS 变量和 mixins。

2) 只需将 application.css 重命名为 application.scss。他们想要它，因为在这种情况下，您将能够在 application.scss 文件中使用 @import 指令。这意味着您将能够在包含的文件中使用 SASS 变量和 mixin。

我应该在布局中明确包含每个样式表吗？

不，只需将它们留在 application.scss 中

AFAIU，这也将使我在生产环境中拥有单独的样式表，而不是像没有 bootstrap-sass 那样的样式表。

不，您将在不同的环境中使用一个 application.scss。