yarnでbootswatchをインストール

環境

rails 6.0.3.2
yarn 1.22.10
bootstrap4.5(yarnで導入済）

インストール可能なバージョンを調べる

$ yarn info bootswatch | less
yarn info v1.22.10
{
  name: 'bootswatch',
  description: 'Bootswatch is a collection of themes for Bootstrap.',
  'dist-tags': {
    latest: '4.6.0',
    next: '4.0.0-beta.3',
    old: '3.4.1'
  },
  versions: [
==中略==
    '4.0.0-alpha.6',
    '4.0.0-beta.2',
    '4.0.0-beta.3',
==中略==
    '4.5.0',
    '4.5.1',
    '4.5.2',
    '4.5.3',
    '4.6.0'
  ],
==以下略==

4.6.0が最新のようだ。

インストール

$ yarn add bootswatch@4.6.0
==中略==
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ bootswatch@4.6.0
info All dependencies
└─ bootswatch@4.6.0
✨  Done in 7.92s.

scssに追加

当たり前ですが、bootstrapは入ってる前提です。
app/app/javascript/src/application.scss
に以下を追記する。
※必ず「@import "~bootstrap/scss/bootstrap";」
を前（variables)と後(bootswatch)で挟む

app/javascript/src/application.scss

+ @import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
+@import "~bootswatch/dist/[theme]/bootswatch";

適用されているかテスト

前項の[theme]をテーマ名に変えて体裁を確認。
※nav.nav-barを
.navbar-dark.bg-primary
.navbar-dark.bg-dark
.navbar-light.bg-light
の３つ並べたものです。

sandstone

solar

minty