🍆

【Shopify】テーマ制作でCSSファイルに含まれるbackground-imageのパスを変換する

2023/10/05に公開

CSS

Scss

Shopify

tech

Shopifyのテーマ開発で、CSSのbackground-image: url('ここにパス'); は、 background:url({{'bg_paper_brown_pc.jpg' | asset_url}}) こんな感じで書かなければなりません。

特に静的コーディングをしているときはこの記述をすると動かないので辛いです。

ということでCSSファイルから url('/hoge.jpg') のような記述を見つけて置換するコードを置いておきます。

replace-background-url.js

const original = await fs.readFile(`${appRoot}/dist/assets/${d.name}`, "utf-8");
let processed = original.replace(/url\((?!['"]?(?:data:|https?:|\/\/))(['"]?)([^'")]*)\1\)/g, `url({{'$2' | asset_url}})`);
let a = processed.replace(/\'\/.*?\//g, "'");
await fs.writeFile(`${appRoot}/dist/assets/style.css.liquid`, a, "utf-8");

original 変数には対象のCSSファイルを読み込みます。
processed 変数で置換を実施。
a 変数で細かい調整を行う。（なんで入れたか覚えてない...。すみません。）
最後にstyle.css.liquidとして書き出して終了です！

ぼくのpackage.json

僕は Vite で静的コーディングを行ってから npm run build でビルドから置換処理までやってもらうようにしています。

package.json

  "scripts": {
    "prebuild": "rimraf dist",
    "dev": "vite",
    "build": "vite build",
    "postbuild": "node replace-background-url.js",
    "preview": "vite preview"
  },

Viteでのコーディングは自作のボイラープレートを使っています。

Shopifyのテーマ実装案件ください！

Shopifyのテーマ実装案件をください！
Online Store2.0で１からテーマ制作できます。

XからDMお待ちしています！

ぼくのpackage.json

Shopifyのテーマ実装案件ください！

Discussion