Sass

Sassを使って Bootstrap4 をカスタマイズしたテーマを作成する。

前提

• VSCode
  • 拡張機能 Live Sass Compiler

詳細

Bootstrap 4.3.1. ソースをダウンロード
https://getbootstrap.jp/docs/4.3/getting-started/download/

下記にBootstrapを解凍
C:\projects\connect-cms\htdocs\node_modules\bootstrap

フォルダ作成 C:\projects\connect-cms\htdocs\public\themes\Originals\bt431

新規作成 C:\projects\connect-cms\htdocs\public\themes\Originals\bt431\themes.scss

// VSCodeの下部「Watch Sass」押下

// add custom
$blue: #555555;

// Bootstrap
@import "../../../../node_modules/bootstrap/scss/bootstrap.scss";

⇒ 保存するとコンパイルされて、下記にcss保存される。
C:\projects\connect-cms\htdocs\public\themes\Originals\bt431\themes.css

完成したテーマをConnect-CMSに適用する。
ブラウザでConnect-CMSのサイトを開いて、(画面上部)管理機能＞管理者メニュー＞サイト管理
　基本テーマ：bt431
　「更新」ボタン押下

トップページを開くと、テーマが反映されたサイトが見れます。

参考

• VSCodeでSASS・SCSSをコンパイルする方法【初心者向き】
• Bootstrap テーマ - Bootstrap 4.3 - 日本語リファレンス
• Connect-CMS => Bootstrap 4.3.1 ※2022/05/09現在