【WP-SCSS】WordPressでSCSSをコンパイルしてくれるプラグイン

WP-SCSS

SassのSCSS記法ファイルコンパイラープラグインです。

WordPressでSassのSCSS記法を使いたいときはこのプラグインを使ってコンパイルしてます。

WP-SCSSの使い方

導入

1. 「WP-SCSS」をインストールし、有効化

2. 管理画面のメニューバーの設定からWP-SCSSを選択

3. Base Locationは「Current Theme」を選択

4. SCSS LocationでScssファイルを格納するパスを記述

   themeファイル/style/style.scssと配置する場合「/style/」と記述します。

5. CSS LocaitionでScssからコンパイルされたCSSファイルを書き出すパスを記述

   themeファイル直下にstyle.cssを書き出してほしいので「/」と記述します。

使い方

1. scssファイルを変更

2. style.scssを保存することでコンパイルされます。

3. ページをリロードしてスタイルの反映を確認できます。

   （変更が確認できない場合はimportしているかと、キャッシュクリアをチェック）

リロードでコンパイルさせる方法

style.scssには変更を加えていないのに毎回保存するのめんどくさい…。

function.phpに次のコードを追加することでリロードをトリガーにコンパイルさせることができます。

/**
 * リロード毎にSCSSファイルを強制コンパイルさせる
 */
define('WP_SCSS_ALWAYS_RECOMPILE', true);

デプロイしてコンパイルする必要がなくなったら無効化してください。

エラー

Fatal error: Uncaught Error: Class 'ScssPhp\ScssPhp\Block\MediaBlock’

今まで問題なく使えていたのに Fatal error: Uncaught Error: Class 'ScssPhp\ScssPhp\Block\MediaBlock’ というエラーが表示されて使えなくなった。

@include とか @mixin とか @media とかを記述するとエラー。

解決方法

1. WordPressからのインストールではなく、以下からダウンロード

   https://scssphp.github.io/scssphp/

2. wp-content/plugins 配下に設置or管理画面から新規追加

   既にWP-SCSSをインストール済みの場合は削除。

または、問題がある部分は wp-content/plugins/wp-scss/scssphpの中にあるらしいので、

1. ダウンロード

    https://github.com/scssphp/scssphp/archive/refs/heads/master.zip

2. 「src」フォルダを展開

3. フォルダーを wp-content/plugins/wp-scss/scssphp/ にコピーし、すべてのファイルを上書き

参考：https://wordpress.org/support/topic/3-0-php-errors/