Question

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

我确信Bootstrap安装正确，因为其他引导样式可以正常工作。

我尝试在application.css文件中移动，但没有运气。

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

我知道我可以将!important添加到css属性中（这样可行，但我不想去那条路线......除非这是要求它的异常之一吗？）。

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

我多次使用谷歌字体没有问题。我只是无法弄清楚我错过了什么。我没有正确组织我的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文件移到引导程序导入下面，以便正确加载。我有一种感觉，我需要在那里做一些其他一些要求的重组，但至少这解决了谷歌字体问题＆amp;教我一些资产管道如何在Rails中运行。

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

2 个答案: