PHPモジュールでSCSSを読み込む(SOY Shop版)

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

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


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

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

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

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

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

<?php
function soyshop_scss(string $html, HTMLPage $htmlObj){
	if(!function_exists("soyshop_compile_scss")) SOY2::import("base.func.css", ".php");

	$in = _SITE_ROOT_ . "/scss/style.scss";
	$out = _SITE_ROOT_ . "/css/style.css";
	
	soyshop_compile_scss($in, $out);

	echo $html;
}
?>

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


echo $html;

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




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

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

<?php
function soyshop_scss($html,$htmlObj){
	if(!function_exists("soyshop_compile_scss")) SOY2::import("base.func.css", ".php");

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

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

同じカテゴリーの記事