Rails + Bootstrapテーマ：CSS/Googleフォントをブートストラップで上書き

私は現在、ブートストラップテーマを自分のレイルプロジェクトに統合しようとしています。 Bootstrap-Sass Gem &をインストールしましたが、ヘッダーに提供されたリンクタグを使用してGoogleフォントを使用しようとしています。現在のところ、BootstrapがGoogleフォント（&おそらく他のCSS）を上書きしているように見えますが、これを修正する方法がわかりません。私はこのことについて尋ねられたいくつかの同様の質問があることを認識していますが、これまで試みてきた解決策はうまくいかなかったようです。Rails + Bootstrapテーマ：CSS/Googleフォントをブートストラップで上書き

他のブートストラップスタイリングが機能するので、ブートストラップが正しくインストールされているはずです。

私はapplication.cssファイルで動くことを試みましたが、運はありません。

headタグのリンクを使用する代わりに、@importリンクをCSSファイルに追加しようとしました。

私は!importantをCSSの属性に追加できることを知っています（これは動作しますが、私はむしろそのルートに行かないでしょう...これが呼び出される例外の1つでない限り）。

私の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>

出典

2017-06-10 Belder

私は最終的に答えを見つけました。私のファイルがどのように私がapplication.cssで注文したのかという問題があったと私は思っていました。正しくロードするもののために、ブートストラップの輸入以下の私のtemplate.css.scssファイルを移動する必要があった

/* 
*= 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"

：私はに私のマニフェストを変更しました。私は他の要件のいくつかでいくつかの再編成を行う必要があると感じていますが、少なくともこれはGoogleフォントの問題を解決しました&は、Railsでアセットパイプラインがどのように機能するか教えてくれました。

出典

2017-06-10 20:01:27 Belder

は、たぶん、あなたがあなたの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 
    */

出典

2017-06-10 15:18:27 Marshall

残念ながら、それは問題を解決しませんでした。私は意図的にプロジェクトの早期にこれらの行を削除しました。しかし、助けてくれてありがとう！上記の私の解決策を見てください。これはテンプレートを使用した初めてのことです。そのため、私は資産を設定する必要があるため、物事は通常より少し異なりました。 – Belder

Rails + Bootstrapテーマ：CSS/Googleフォントをブートストラップで上書き

答えて

関連する問題