ruby-on-rails - ブートストラップ用に baseFontFamily を設定するにはどうすればよいですか?

Question

bootstrap_and_overrides.css.scss ファイルでベースフォントファミリを設定しようとしていますが、何らかの理由で、レンダリングされた HTML が上書きではなくデフォルトのフォントタイプを使用しています。ブートストラップ変数のデフォルト値を変更する方法はありますか?

bootstrap_and_overrides.css.scss

@import "bootstrap";

$baseFontFamily: Arial,Helvetica,sans-serif  !default;
$baseFontSize: 11px !default;

レンダリングされた css:

body {
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}

score 3 · Accepted Answer

ソースを変更するかどうかについての 2 つのリンクを次に示します。

または、カスタム css.scss ファイルを使用してソースを変更します。

基本的に、ブートストラップのインポートの前にオーバーライドを配置したいと考えています。

$baseFontFamily: Arial,Helvetica,sans-serif  !default;
$baseFontSize: 11px !default;

@import "bootstrap";

フォントファミリーは次のように定義されます。

@import "bootstrap";

@sansFontFamily: Arial,Helvetica,sans-serif
@serifFontFamily: Font you want

これらは LESS 変数であり、ブートストラップのインポート後に定義する必要があります。

score 2 · Accepted Answer

ここでのポイントは、正しい変数名を正しい位置に指定する必要があるということです。

正しい変数名:ブートストラップの少ない変数名。@文字を$sass syntaxに変更する必要があります。
正しい位置: call の前にカスタム変数を定義します@import "bootstrap";。ブートストラップがロードされている場合、カスタム変数は使用されません。これが、コードが機能しない理由です。

この場合、コードは次のようになります。

bootstrap_and_overrides.css.scss

$font-family-base: Arial, "Helvetica", sans-serif;
$font-size-base: 11px;

@import "bootstrap";

score 0 · Accepted Answer

bootstrap-sass gem を使用している場合、この変数の正しい名前は次のとおりです。

font-family-baseとfont-size-base

変数がまだ割り当てられていない場合は、値の末尾に !default フラグを追加して、変数に割り当てることができます。これは、変数がすでに割り当てられている場合は再割り当てされませんが、値がまだない場合は値が与えられることを意味します。

!default||=これは、Rubyの operator に相当する SASSです。

したがって、あなたの場合、次のように動作します。

$font-family-base: Arial,Helvetica,sans-serif
$font-size-base: 11px

5 に答える 5