如何在使用bootstrap-sass时自定义bootstrap css

Question

我想改变许多东西,例如按钮颜色,或者例如更改导航栏(标题)上的背景图像颜色.我使用boostrap-sass gem所以我不能使用boostrap网站' Customize page

我是否真的应该在我的文件custom.css.scss上覆盖所有这些,或者我可以在更低的位置更改这些吗？我没有找到.css文件允许我在我的项目文件中执行此操作(我搜索了所有的lib,app和供应商/资产,但现在我找到了boost的css.我怀疑这是因为他们不在那里,但他们'直接在gem文件中)我有很多变化,所以我觉得支持这么多东西不是最好的选择.

最好的方法是什么？谢谢

Answer 1

我已经开始使用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在您的页面中即可.这就是我开始这样做的方式,还没有遇到任何错误.

我发现这是我见过的最简单的方法.当新的更新下来时,我将更新核心引导程序文件并保留我的编辑!

Answer 2

您永远不应该修改Boostrap的原始文件.最好的选择是用你自己的类重写它们的类.您可以通过在assets/stylesheets文件夹中创建一个css文件来完成此操作,该文件将自动包含在您的应用中.

Answer 3

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

你会注意到,在为它赋值之后,许多Bootstrap变量都有一个"!default".这意味着如果sass已经定义,sass将不会覆盖它.

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

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

在"Styling Bootstrap with Variables"下找到了这个:http://pivotallabs.com/sass-with-bootstrap/