9

我想更改很多东西,例如按钮颜色或例如更改导航栏(标题)上的背景图像颜色。我使用 boostrap-sass gem,所以我不能使用 boostrap 网站的自定义页面

我真的应该在我的文件 custom.css.scss 上覆盖所有这些,还是可以在更低级别的地方更改这些?我在我的项目文件中找不到允许我这样做的 .css 文件(我搜索了所有 lib、应用程序和供应商/资产,但我没有找到 boostrap 的 css。我怀疑这是因为它们不存在,但它们直接在gem文件中)我有很多变化,所以我觉得覆盖这么多东西不是最好的选择。

最好的方法是什么?谢谢

4

3 回答 3

27

我已经开始使用 Twitter Bootstrap 的 Sass 风格,我只是想出了一种合理的方式来构建我的文件,这样我就可以在不弄乱核心文件的情况下进行自己的自定义覆盖,并将所有 CSS 保存在一个文件中以加快加载速度。

简而言之,我将所有 sass 文件放入 assets/sass 并为核心文件创建一个名为bootstrap的子目录。然后,我为我的自定义 scss 文件创建了一个名为theme的同级目录。

转到/bootstrap此目录并在其中有一个名为的文件bootstrap.scss,其中包括所有核心组件。将此文件重命名为theme.scss并将其放在父目录中,如下所示:

文件结构

如您所见,我已经在主题目录中包含了一些自定义的覆盖 sass 的文件。这些将在编译时添加到默认引导 CSS 的底部。

当您像这样theme.scss进入并更改包含路径时,魔法就会发生。向图像底部查看覆盖,向顶部查看自定义变量参考。

注意:如果要在引导程序中编辑变量,最好在目录中创建自己的_variables.scss文件theme并将其包含在文件顶部theme.scss。通过这种方式,您可以覆盖引导变量,这些变量将来会随着更新而持续存在。

然后只需包含theme.css在您的页面中,瞧。这就是我开始这样做并且还没有遇到任何错误的方式。

我发现这是我见过的最简单的方法。当新的更新出现时,我只会更新核心引导文件并保留我的编辑!

于 2013-10-27T05:40:57.337 回答
7

我也有同样的问题,我喜欢 gillytech 的回答,但我想补充一点,您不需要将 _variables.scss 文件中的所有内容复制到您自己的变量文件中。您只需要声明和使用 Bootstrap 正在使用的相同变量,并确保您将在加载 Bootstrap 的 _variables.scss 文件之前加载变量文件。

您会注意到许多 Bootstrap 变量在为其赋值后都有一个“!默认值”。这意味着如果 sass 已经定义,则不会覆盖它。

所以我的 theme.scss 文件看起来像这样:

@import "superhero-variables";
@import "bootstrap";
@import "superhero-theme";

在“使用变量设置引导程序样式”下找到了这个:http: //pivotallabs.com/sass-with-bootstrap/

于 2014-10-10T19:58:15.850 回答
7

你不应该修改 Boostrap 的原始文件。最好的选择是用你自己的类覆盖他们的类。您可以通过在 assets/stylesheets 文件夹中创建一个 css 文件来做到这一点,该文件将自动包含在您的应用程序中。

于 2013-05-01T20:11:55.353 回答