Blog

下記の記事の通り、ShopifyテーマでSassは非推奨となっています。
ShopifyテーマでSassが非推奨となります

理由は、パフォーマンスの問題と、Sass自身のバージョンとテーマとが合わなくなった場合の問題があるためだそうです。

なるほどと思いつつ、開発時にSassを使いたいという人もいると思います。
公式記事では、「SassからCSSに移行するか、.scssファイルをShopify外でコンパイルする」ことが奨められており、今回は、後者をVSCodeのアドオンで簡単に実装する方法を書いていきます。

前提として、Shopify CLIを使いローカルに環境を構築しています。また、エディターはVisual Studio Codeを使用しています。

Visual Studio Codeのアドオン「Live Sass Compiler」を使う

Visual Studio Codeのアドオン「Live Sass Compiler」を使うと、Sassファイル保存時にリアルタイムでcssにコンパイルされます。

sassを格納する場所は、テーマ直下にstyle/scssというディレクトリを作りました。
デフォルトのままでは.cssファイルが同じディレクトリに作成されるので、これをShopifyのテーマのassetsディレクトリに作成するように設定します。

テーマ直下の「.vscode」ディレクトリの「settings.json」に下記を追記します。(なければフォルダとファイルを作成します。)

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/assets"
        }
    ],
    "liveSassCompile.settings.generateMap": false
}

• formatは出力CSSの形式で、expandedは各CSSルールが一行に一つずつ出力される形式を指します。
• extensionNameは出力ファイルの拡張子を指定します。
• savePathは出力先のディレクトリを指定します。Shopifyの場合は、assetsディレクトリになります。
• generateMapは、Sassのソースマップを出力するかどうかを指定します。今回は出力しないように設定しています。

「Live Sass Compiler」のWatch機能を起動するには、VSCodeの右下にある「Watch Sass」をクリックします。

これで、Sassファイルを保存すると、自動的にShopifyのテーマのassetsディレクトリにcssファイルが作成されます。