Liquid、JavaScriptなどに関する質問
shopifyの「Debut」テーマを使用しています。
theme.scss.liquidの中で定義されている@mixinを、カスタム用に作成したscss.liquidの中で使用するためにファイルをインポートさせたいのですが、方法がわかりません。
プレーンなcssファイルであれば、theme.scss.liquidの下部に
@import "custom.css";
と記述することで実現できましたが、scss.liquidファイルのインポートは同じ方法ではできませんでした。
お手数ですがご回答いただけましたら幸いです。
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を使いたいということでしょうか?
ご回答いただきありがとうございます!
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)ファイルは別に作成したいと考えています。
なるほど。
それであれば、 theme.scss.liquid 内に、@import custom.scss で解決しそうですが、@importも読み込めないということでしょうか?
こちらに少し参考となりそうなことが書いてあります。
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/...
はい、custom.scssでもincludeはできませんでした。
共有いただきありがとうございます!
2つ目のリンクで解決策としてあげられているGulp/Gruntタスクは、現在はサポートを終了しているようですので
1つ目の記事の方法を試してみようと思います。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024