WP-SCSSで@useが使えない？Live Sass Compilerへの乗り換え方法

先日、新しい案件の開発環境を整備する中で、WordpressのプラグインWP-SCSSの導入を検討しました。しかし、後述の理由でWP-SCSSの導入を断念。代替としてVSCodeのLive Sass Compilerを導入する事としました。

WP-SCSSの導入を検討されている方への注意喚起と、代替としてLive Sass Compilerを使う方法について紹介します。

WP-SCSSとは？

WP-SCSSはSCSSをCSSへコンパイルする作業をWordpressに実行させる無償プラグインです。

執筆時点（2023/6/14）で有効インストール数50,000+、評価4.5、評価数60とそれなりに人気のプラグインです。

WordPressにてプラグイン導入後、SCSSを格納するフォルダ、コンパイルされたCSSを格納するフォルダを指定することで動作します。

その他GUIでコンパイルモードやソースマップの設定ができるのも、デザイナー寄りのメンバーにはフレンドリーだと思い導入候補としていました。

今回はdockerでチームの開発環境を揃える予定でした。そこで、コンテナ構築後に実行するWP-CLIを使ったシェルスクリプトも準備していました。以下のコマンドで自動的にWP-SCSSをインストール、アクティブ化されるようにしました。

wp plugin install --allow-root wp-scss
wp plugin activate --allow-root wp-scss

簡単なSCSSを書いて動作確認の上、チームに展開しました。

WP-SCSSで@useが使えない？なぜ？

ところが、フロントエンジニアから「@useを使うとエラーになる」と報告を受けました。

一部書き出すと以下の通りです。@useを解釈できていないようですね。

"parse error: failed at `@use "style" as s; ` /var/www/html/wp-content/themes/hoge/sass/footer.scss on line 1, at column 0"

SCSSの記述に問題はなく、その他設定やコードで考えられる原因を調査しましたが、結論WP-SCSSでは@useが使えないという結論になりました。

調べてみるとWP-SCSSの最新Ver.である3.0.0が2022/11/18にリリースされたのを最後に更新されていません。

また、WP-SCSSはscssphpというライブラリを前提としており、こちらも最新Ver.である1.11.0が2022/9/3にリリースされたのを最後に更新されていません。

ご存知の方も多いと思いますが、SCSSは2022/10/1に、@use以前使われていた@importが廃止になりました。この@import廃止のタイミングで開発が停止し、@useに対応していないのではないかと推測します。

WP-SCSSの代替：Live Sass Compilerのインストールと設定

WordPress上でSCSSをコンパイルする代替としてSCSS-Libraryというライブラリも検討しましたが、執筆時点で有効インストール数1,000+程度だったため見送りました。

元々、Wordpressのプラグインとして導入することでチームメンバの環境を統一化しやすくなると考えていましたが、実際利用してみると@useの問題以外にもコンパイルタイミングがファイルの保存時ではなく、ページのリロード時であるなど使いづらい点も見えてきたので、プラグインでのコンパイルにこだわる必要はないと判断しました。

代替の方法としてVSCodeの拡張機能「Live Sass Compiler」を利用することとしました。幸い全メンバーがVSCodeを利用しているので、導入ハードルは低いと判断しました。

ただし、Live Sass Compilerのインストール手順と設定はdockerとは別にチームに展開する必要があります。WP-SCSSの代替として導入される方への参考として、以下チームに展開した手順と設定を記載しておきます。

Live Sass Compilerのインストール

拡張機能タブにて「Live Sass Compilier」を検索します。

候補として2つ出てきますが、インストール数が多い方は古いバージョンv3.0.0なので気を付けてください。

v6.0.5の方をインストールします。

Live Sass Compilerの設定

インストール後は歯車アイコン＞Extension Settingsから設定を行います。

好みの部分もありますが、デフォルトから変更したのは以下です。

Formats

Edit in setting.jsonをクリックして設定用のjsonファイルを編集します。

今回はテーマフォルダ以下にcssというフォルダを用意して、そこにcssを生成したいので、savePathに”css”を指定します。

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "css",
        "savePathReplacementPairs": null
    }
],

Watch On Launch

この項目はVSCodeでワークスペースを開いた時に自動的にSCSSファイルの更新を監視を開始する設定です。

これをONにしない場合、手動で画面右下の「Watch Sass」をクリックして監視を開始する必要があります。

まとめ

以上、WP-SCSSの導入見送りの顛末と代替としてLive Sass Compilerを導入した流れをご紹介しました。

新案件開始のタイミングでは、これ以外にも様々な開発環境、開発フロー、プロダクトの技術や方法論の選定を行いますが、案件開始までの猶予期間、技術の成熟具合や将来性、チームのスキルレベル等加味する要素が多く、毎回悩ましいものです。

今回はSCSSのコンパイル環境にフォーカスしましたが、チームの開発環境を整備する立場の方々の一助になれば幸いです。