テーマをコピーするとCSSが反映されない現象

[mwhr126]

現在のテーマのバックアップを取るため、「管理画面から複製」をすると、複製したテーマのCSSが崩れた状態で複製されてしまいます。

ただ複製をしても、そのままコードも複製されるはずですが、何故CSSが崩れた状態（一部反映されない状態）で複製がされてしまうのか原因が不明です。

この謎の現象に対して分かる方が見えましたら、お教えいただけますと幸いです。

お手数お掛けいたしますが、よろしくお願い致します。

[Qcoltd · Accepted solution]

私自身は、複製によるスタイルの崩れに遭遇したことがないため、

見当違いの回答であれば申し訳ございません。

私が時折、遭遇する次の現象と関係があるかもしれません。

下記のようにCSSを記述した場合、

(参考: https://shopify.dev/api/liquid/tags/theme-tags )

{% stylesheet %}
  css_styles
{% endstylesheet %}

{% stylesheet %}内の内容をいかに変更しても、

ストアフロント上では、

その変更が反映されないことがあります。

しかし、下記のような記述があった場合に、

<div class="box">
  <p>テキストテキスト</p>
</div>

{% stylesheet %}
  css_styles
{% endstylesheet %}

下記のように変更を加えて保存すると、{% stylesheet %}内の変更が反映されます。

(<div class="box">の下に改行を追加しただけです。)

<div class="box">

  <p>テキストテキスト</p>
</div>

{% stylesheet %}
  css_styles
{% endstylesheet %}

少し古い投稿ですが、同様の現象は海外のShopifyコミュニティでも報告されているようです。

https://community.shopify.com/c/shopify-design/section-edits-not-updating-stylesheet-and-javascript/...

この{% stylesheet %}を使用してCSSを記述しますと、

{% stylesheet %}の内容が、特定の外部のCSSファイルに出力されるようです。

もう少し、具体的に申しますと、

<style>タグで、htmlの中に現れるのではなく、

https://cdn.shopify.com/s/files/x/xxxx/xxxx/xxxx/x/x/compiled_assets/styles.css

のようなURLのCSSファイルに出力されます。

(URLを考慮すると、出力されるというよりコンパイルされる、といった方が正確かもしれません。)

{% stylesheet %}内を変更しただけでは、

コンパイルが行われず、この外部CSSファイルが更新されないことがある、

のだと個人的に考えています。

もしかしたら、

これと似たようなことが「複製」でも発生するのかもしれません。

上記、海外コミュニティの投稿にあるように、

これが原因である場合、

関連するliquidの{% stylesheet %}や{% javascript %}以外の箇所に、

何かしら変更を加えれば(例えば、改行を1つ追加するなど)、

スタイルの崩れが解決するかもしれません。

もし、

{% stylesheet %}を使用していないようでしたら、

この回答は、全くの見当違いとなりますので、

スルーしていただければと思います。

ご参考まで。

(キュー田辺)

[mwhr126]

株式会社Q (キュー)

田辺様

ご丁寧にお返事いただき、誠にありがとうございます。

もしかしたら{% stylesheet %}内に余計なコードが入ってしまっているのかもしれません。

{% stylesheet %}内にコードの記述が残っているかは分かりませんが、今後は一貫してアセットフォルダ内にcssファイルを作成して作業を進めると、今回のようなエラーが起こらないのではないかと推測しております。

この度は原因のソースとなる記事も添えて、ご回答をいただき感謝いたします。