Rails + Bootstrap 主题：Bootstrap 覆盖了我的 CSS / Google 字体

Question

我目前正在尝试将 Bootstrap 主题集成到我的 rails 项目中。我已经安装了 Bootstrap-Sass Gem 并且正在尝试使用 Google 字体在标题中使用他们提供的链接标签。目前，Bootstrap 似乎覆盖了 Google 字体（可能还有其他 CSS），我不知道如何解决这个问题。我意识到有几个类似的问题被问到这个问题，但到目前为止我尝试过的解决方案似乎没有奏效。

我确信 Bootstrap 已正确安装，因为其他引导程序样式也有效。

我尝试在我的application.css 文件中移动一些东西，但没有运气。

我尝试在我的 CSS 文件中添加一个 @import 链接，而不是在 head 标记中使用链接。

我知道我可以将 !important 添加到 css 属性（这可行，但我宁愿不走那条路……除非这是需要它的那些例外之一？？）。

我的application.rb 有config.assets.paths << Rails.root.join("app", "assets", "fonts")。

我已经多次使用 Google 字体，没有任何问题。我只是无法弄清楚我错过了什么。我只是没有正确组织我的 CSS 清单文件吗？我已经读过您在清单中要求您的资产的顺序很重要，但我并不清楚在每种情况下何时需要。就我而言，template.css 是我要开始工作的主要 css 文件。是否应该将其放在引导程序 @imports 下方，如果是这样，如何（当我尝试这种奇怪的事情发生时）？

Application.css.scss

/*
 *= require bootstrap.min
 *= require themify-icons
 *= require magnific-popup
 *= require vertical.min
 *= require template
 *= require jquery-ui
 *= require font-awesome
*/

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

我的 application.html.erb 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- Favicons-->
    <%= favicon_link_tag 'favicon.png' %>
    <%= favicon_link_tag 'apple-touch-icon.png' %>
    <%= favicon_link_tag 'apple-touch-icon-72x72.png' %>
    <%= favicon_link_tag 'apple-touch-icon-114x114.png' %>
    <!-- Web Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Suranna" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
  </head>

  <body>

    <%= yield %>

  </body>
</html>

Answer 1

也许你应该把下面的代码放在你的 application.css 中

     *= require_tree .
     *= require_self

喜欢这个

    /*
     *= require bootstrap.min
     *= require themify-icons
     *= require magnific-popup
     *= require vertical.min
     *= require template
     *= require jquery-ui
     *= require font-awesome
     *= require_tree .
     *= require_self
    */

Answer 2

所以我终于找到了答案，我怀疑问题出在我如何在application.css 中订购我的文件（我一定没有尝试过让它工作的这个特定顺序）。我将清单更改为：

/*
 *= require bootstrap.min
 *= require themify-icons
 *= require magnific-popup
 *= require vertical.min
 *= require jquery-ui
 *= require font-awesome
*/

@import "bootstrap-sprockets";
@import "bootstrap";
@import "template"

有必要将我的template.css.scss 文件移动到引导导入下方，以便正确加载。我有一种感觉，我需要根据其他一些要求进行更多的重组，但至少这解决了 google 字体问题并教会了我一些关于资产管道在 Rails 中的工作原理。