我无法使用自定义 css 覆盖 rails 中的引导 css答案

【问题标题】：I can't override bootstrap css in rails with my custom css我无法使用自定义 css 覆盖 rails 中的引导 css
【发布时间】：2017-02-11 00:30:33
【问题描述】：

我是 Rails 新手，当我通过添加来添加引导程序时，我正在关注本教程 https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1#css_preprocessors

@import "bootstrap-sprockets"
@import "bootstrap"

在application.css.sass 的最底部，一切正常。但是，我有一行代码

html, body{background:#000;color:#FFF;}

这没有得到尊重。看了一圈才发现是因为我的申请文件：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require custom
 */
@import "bootstrap-sprockets"
@import "bootstrap"

我了解，由于“引导程序”位于最底部，这就是网站使用的 CSS，但是，如果我将其移至顶部或任何其他位置，我会收到错误页面。我还有其他方法可以导入引导程序或覆盖页面吗？

【问题讨论】：

如果您使用的是 .sass 语法，那么html, body { background:#000;color:#FFF; } 对一个无效。您也可以参考Bootstrap-SASS 文档了解 Ruby 实现。
我想问你是否有更新。谢谢法布里齐奥

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

我引用https://github.com/rails/sprockets#the-require_self-directive

require_self 指令

require_self 告诉 Sprockets 插入 当前源文件的主体 在任何后续 require 指令之前。

这意味着如果你的 require_self 然后导入引导程序，因为 CSS 代表 级联样式表，最后一个样式将始终应用加上 css 特异性 规则。在以下链接中阅读有关 css 特异性的信息 http://cssspecificity.com/

您可以尝试设置 !important 来测试问题是否已解决。另一种方法是按照建议将您的 css 或 scss 代码包含在单独的文件中：

*= require_tree .
 *= require_self
 *= require custom
 */
@import "bootstrap-sprockets"
@import "bootstrap"
@import "my-css-style"

如果您仍有疑问，请检查 application.css.scss 是如何加载到 localhost:3000/assets/application.css.scss 以查看不同样式表是如何加载到一个文件中的，然后还可以在 chrome 上进行调试/firefox，禁用所有样式，直到您确定哪个样式被覆盖。

【讨论】：