【Rails】Bootstrapを部分適用させてCSSでデザインを編集する方法

Question

環境

macOS 10.15.5
Rails 5.2.4.2
Docker 19.03.12

前提・実現したいこと

ページネーションの機能だけBootstrapを部分適用させて(div内だけ)CSSでデザインを編集させたい。
※gemのkaminariを使用して反映

    <div class="bootstrap">
      <%= paginate @posts %>
    </div>

適用させたいCSS

.pagination>li>a {          
  border: none;     /*枠線をなくす*/
  color: #696969;   /*文字の色を変える*/
}

/* 表示しているページ番号のデザイン */
.pagination>.active>a {     
  background: #93c9ff;     /*背景の色を変える*/
  border-radius: 15px;     /*角を丸くする*/
}

/*ホバー時のデザイン*/
.pagination>li>a:hover {        
  border-radius: 15px;    /*角を丸くする*/
}

試したこと

mybootstrap.cssをダウンロードして特定のdivのみが適用させることはできました。しかしすでにcssの羅列がつらつらと並んでいるため色の変更やフォントの変更が難しいです。
逆にcssを上書きする方法で検索するとBootstrapがhead内に記述して全適用されている前提の例しか見つけることしかできず、部分適用からのCSSで編集する全工程のやり方を見つけるに至りませんでした...

Answer 1

mybootstrap.cssをダウンロードして特定のdivのみが適用させることはできました。しかしすでにcssの羅列がつらつらと並んでいるため色の変更やフォントの変更が難しいです。

このニュアンスが絶妙で回答しにくいのですが、適用させたいCSSとkaminariが適切に設定されているけど、色などが反映されないという前提で回答します。

Railsの標準的な作り方をしているならapplication.scss（またはcss）の一番下に適用させたいCSSを追加する。
それでも他のCSSの影響があるようなら、!importantで優先順位を上げてみるというアプローチはいかがでしょうか？

Comments

[_chii]

ありがとうございます！内容を参考に実行をしたいと思います！！