PHPモジュールでSCSSを読み込む

SOY CMSにはSCSSコンパイラが同梱されていて、PHPモジュールで実行する事が可能です。

今回の説明ではサイトIDをsiteにし、SCSSのファイルは/ドキュメントルート/site/scss/style.scssにして話を進めます。


始めに公開側ページのテンプレートにcms:moduleのタグを追加します。

<!-- cms:module="css.scss" --><link rel="stylesheet" href="/site/css/style.css"><!-- /cms:module="css.scss" -->

続いて、上記のモジュールのタグに該当するファイルを作成します。

/ドキュメントルート/site/.module/css/scss.php

scss.phpに下記のコードを記述します。

<?php
function soycms_scss(string $html, HTMLPage $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;
}
?>

これでSCSSのファイルをそのまま実行できるようになりました。


echo $html;

のコードは、<!-- cms:module="css.scss" -->で囲った箇所のHTMLが格納されていますので、コンパイル後のCSSを読み込む為のHTMLタグがそのまま出力されます。




今回のコードはPHPモジュールでCSSのインライン化に記載されているCSSのインライン化をすると良いです。

この場合、何回もコンパイルするのは無駄ですので、コンパイル後の生成物をキャッシュに入れた後にインライン化します。

<?php
function soycms_scss($html,$htmlObj){
	if(!function_exists("soycms_compile_scss")) SOY2::import("site_include.func.css", ".php");

	// .cacheディレクトリ以下にファイルを生成することで成果物のキャッシュ化ができる
	$out = _SITE_ROOT_ . "/.cache/out.css";

	// コンパイラ後のCSSファイルのキャッシュがない場合はコンパイルする
	if(!file_exists($out)){
		$in = _SITE_ROOT_ . "/scss/style.scss";
		soycms_compile_scss($in, $out);
	}
	
	echo "<style>".soycms_compress_css_by_filepath($out)."</style>\n";
}
?>

同じカテゴリーの記事