UnsplashのSabeer Darrが撮影した写真

はじめに

Sassを使う場合にはエディターの機能でCSSにコンパイルして使う方が楽ですが、

この記事ではPhalconの処理の中でScssをCSSにコンパイルする方法をご紹介します。

環境によらずPhalconが動きさえすればSassを使えるので勉強としてPhalconを触っている方におすすめの方法です。

動作確認した環境

OS：Windows11 Home / WSL(Ubuntu20.04)
php：v7.4.33
phalcon：4.0.6
Phalcon DevTools：v4.2.0

Sass導入の流れ

以下の3ステップでPhalconにSassを導入します。

①SCSSフォルダを作成する
②Sassコンパイラの導入
③cssファイルの読み込み

それではさっそく始めます。

①SCSSフォルダを作成する

以下のように/app/publicフォルダ直下に「scss」フォルダ、その下に「main.scss」ファイルを作成します。

/app/public/scss/main.scss

②Sassコンパイラの導入

まず、以下コマンドで「scssphp/scssphp」をインストールします。

$ composer require scssphp/scssphp

次に/app/public/index.phpの「declare(strict_types=1)」の次の行に以下を追記します。

require_once("../vendor/scssphp/scssphp/scss.inc.php");
use ScssPhp\ScssPhp\Compiler;
$scssRootPath = "scss";
$cssRootPath = "css";

$compiler = new Compiler();
$compiler->setImportPaths($scssRootPath);

$scssFilePaths = glob("./{$scssRootPath}/*.scss");
foreach($scssFilePaths as $filePath){
    //取得したパスから拡張子無しのファイル名を取得（処理前：./scss/main.scss ⇒ 処理後：main）
    $fileName = str_replace("./{$scssRootPath}/", "", $filePath);
    $fileName = str_replace(".scss", "", $fileName);

    //scss ⇒ cssのコンパイル（scssフォルダ内の全ファイルをコンパイルしcssフォルダに格納する）
    if(substr($fileName, 0, 1) != '_'){
        file_put_contents("./{$cssRootPath}/{$fileName}.css", $compiler->compileString("@import '{$fileName}.scss';")->getCss());
    }
}

③cssファイルの読み込み

最後にコンパイルで生成されるcssを読み込みます。

「/app/views/index.phtml」のheadタグ内に以下を追記してください。

<link rel="stylesheet" href="/css/main.css">

これでSassの導入完了です！

scssがコンパイルされるタイミングはブラウザの表示を更新するタイミングです！

main.scssを書き換えたら以下コマンドでサーバーを起動し、表示を確認してください。

phalcon serve

以上です！