SOY CMSでSCSSコンパイラを実装しましたの記事で、SOY CMSで運営しているサイトで直接SCSSを読み込む方法を記載した。
SCSSの直接読み込みで何をしたかったのか？を記載すると、Bootstrapで【SEO対策】Core Web Vitalsに記載した内容を手軽に試したかった。
今回は練習として、Bootstrapのボタンのコンポーネントの記述のみをピックアップして、ページのHTMLにインラインで挿入するということをしてみる。
Bootstrap · 世界で最も人気のあるフロントエンドフレームワーク
今回はBootstrap 5(5.3.1-alpha1)で話を進める。
※Bootstrap 4系でも同様の方法で対応できる
最初にDownload · Bootstrap v5.3のページでSource filesの箇所からZIPファイルをダウンロードしてくる。
ZIPファイルがダウンロードできたら、解凍して展開する。
展開が終了したら、scssディレクトリをSOY CMSで作成したサイトディレクトリに移行する。
サイトIDがsiteの場合、scssディレクトリを
/ルートディレクトリ/site/scss/
のように配置する。
今回の例ではボタンコンポーネントのCSSの記述のみを利用する。
/ルートディレクトリ/site/scss/bootstrap_btn.scss
を作成し、下記のように記述する。
※記述の際に同じ階層にあるbootstrap.scssからコピペすると良い。
@import "mixins/banner";
@include bsBanner("");
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// Layout & components
@import "buttons";
※functionsからutilitiesまでのimportの記述は必ず入れる
※Bootstrap 4の場合はfunctions、variablesとmixinsのimportが必須
続いて、
/ルートディレクトリ/site/scss/style.scss
を用意して、下記の記述をする。
@import "/ルートディレクトリ/site/scss/bootstrap_btn";
続いて、SOY CMSの方の手続きを進める。
前回の記事同様、BootstrapのCSSを読み込みたいページに
<!-- cms:module="css.scss" --><link rel="stylesheet" href="/site/css/style.css"><!-- /cms:module="css.scss" -->
を挿入しておく。
※今回はCSSのインライン化なので<link>タグの記述は不要になるが、わかりやすくするために残しておく
<?php
function soycms_scss($html,$htmlObj){
if(!function_exists("soycms_compile_scss")) SOY2::import("site_include.func.css", ".php");
$in = _SITE_ROOT_ . "/scss/style.scss";
$out = _SITE_ROOT_ . "/css/style.css";
soycms_compile_scss($in, $out);
// インライン化の為に下記のコードはコメントアウト
// echo $html;
// 生成したCSSファイルの記述を圧縮してインライン化
if(file_exists($out)) echo "<style>".soycms_compress_css_by_filepath($out)."</style>\n";
}
?>
ページを開き、ページのソースを表示でCSSがインライン化で挿入されていれば終了。
毎回SCSSをコンパイルするのは速度に影響するので、CSSやページ全体をキャッシュ化して無駄をなくしておく必要はあるが、今回は触れないことにする。
後はファーストビューに関係するCSSを<head>内に挿入して、残りを</body>以下に挿入すればCore Web Vitalsのスコアは改善されるはず。
追記
style.scssの@importの記述に誤りがないのに、style.cssが空文字で生成される場合、
/ドキュメントルート/CMSインストールディレクトリ/common/site_include/func/vendor/scssphp/scssphp/bin/pscss
に実行権限を与えるとうまくいくかも
