scss.liquidにカスタマイズ用のscssを読み込ませたい

aw-skym
新規メンバー
4 0 0

shopifyの「Debut」テーマを使用しています。

theme.scss.liquidの中で定義されている@mixinを、カスタム用に作成したscss.liquidの中で使用するためにファイルをインポートさせたいのですが、方法がわかりません。

 

プレーンなcssファイルであれば、theme.scss.liquidの下部に

@import "custom.css";

と記述することで実現できましたが、scss.liquidファイルのインポートは同じ方法ではできませんでした。


お手数ですがご回答いただけましたら幸いです。

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1109 257 456

scss.liquidは、scssではなくて、liquidなので、他のliquidファイル同様、Shopifyがまずliquidコンパイルして、scss に変換し、さらに、scssコンパイルしてcssにします。なので、scssから、直接scssとして扱うのは無理かと思います。

 

theme.scss.liquidでは、他のテーマ同様、liquidの構文が使えると思うので、読み込みたい、scss.liquidをsnippetにしてrenderするとかどうでしょうか?
https://shopify.dev/docs/themes/liquid/reference/tags/theme-tags#render

 

ちなみに、scssではなくて、scss.liquidを読み込ませたいのは、ご自分のscss内でもliquidを使いたいということでしょうか?

Technical Partner Manager, Japan
0 件の「いいね!」
aw-skym
新規メンバー
4 0 0

ご回答いただきありがとうございます!

 

theme.scss.liquidでは、他のテーマ同様、liquidの構文が使えると思うので、読み込みたい、scss.liquidをsnippetにしてrenderする

snippetsの中にcustom.liquidをつくり
theme.scss.liquidの最下部に{% render 'custom' %}としましたがエラーになってしまい読み込まれませんでした。
custom.liquidの中を空にしたり、別のsnippetsをrenderしても同じエラーが出るので、そもそもrenderができていないように見受けられます。

 

scssではなくて、scss.liquidを読み込ませたいのは、ご自分のscss内でもliquidを使いたいということでしょうか?

できればliquidも使用したいですが必須ではありません。

今回最も実現したかったことは、theme.scss.liquid内で定義されている@mixinや変数の継承です。
あとはscss構文さえ使えればいいので、scss.liquidではなくscssでも構わないのですが、どちらにしても@importはできませんでした。

少しのカスタマイズであればtheme.scss.liquidの中に追記をすればいいと思うのですが
カスタマイズが広範囲に及ぶため、メンテナンスのことを考えてカスタマイズ用のscss.liquid(もしくはscss)ファイルは別に作成したいと考えています。

 

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1109 257 456

なるほど。

それであれば、 theme.scss.liquid 内に、@import custom.scss で解決しそうですが、@importも読み込めないということでしょうか?

Technical Partner Manager, Japan
0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1109 257 456

こちらに少し参考となりそうなことが書いてあります。

https://www.shopify.com/partners/blog/live-reload-shopify-sass

https://community.shopify.com/c/Shopify-Design/How-to-import-an-additional-CSS-file-in-theme-liquid/...

Technical Partner Manager, Japan
0 件の「いいね!」
aw-skym
新規メンバー
4 0 0


はい、custom.scssでもincludeはできませんでした。

 

共有いただきありがとうございます!

2つ目のリンクで解決策としてあげられているGulp/Gruntタスクは、現在はサポートを終了しているようですので

1つ目の記事の方法を試してみようと思います。

0 件の「いいね!」