Переменная SCSS для переключения фонового URL с пути на ASSET_URL

Question

Возможно ли это вообще? В основном у меня есть мои статические шаблоны HTML, которые используют пути к изображениям, такие как url (.../img/Interface/Icon.svg). Затем шаблоны используются в теме Shopify (сланец), поэтому все изображения должны идти прямо в папку «Ресурсы» без подпапок.

Это было бы хорошо, так как я мог бы просто сопоставить мою статическую структуру шаблона с темой Shopify slate, но, очевидно, изображения должны быть в следующем формате: #selector {background:url({{ 'image.jpg' | asset_url }});}.

Может кто-нибудь придумать способ управления CSS при его копировании? Все время менять их вручную будет больно.

Answer 1

Я не уверен, с чем вы боретесь, но если вы хотите использовать жидкость в файле SCSS, просто сохраните ее как whateverStylesheet.scss.liquid, и тогда вы сможете использовать любую жидкость внутри файла, Shopify сначала обрабатывает жидкость, а затем - SCSS перед обработкой окончательного документа CSS.

Редактировать: Читать Руководство SASS Shopify для получения дополнительной информации.

Answer 2

Вы не обязаны писать их, используя фильтр asset_url.

Вы можете просто оставить их как background:url('image.jpg'), и они будут работать с той лишь разницей, что они будут кешироваться таким образом.