Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.
But the liquid does not properly populate when I load up my site (e.g., it doesn't pull the URL of 'our-story-hero.jpg' from my assets folder; it maintains the {{ 'our-story-hero.jpg' | asset_url }} syntax in my CSS code and throws an error because it's not valid CSS. This syntax seems to be included in a
Problem
I'm following the instructions for creating a template bundle here: https://github.com/Shopify/slate/wiki/Template-and-layout-bundles. Shopify is correctly importing my page-specific SCSS files, but it isn't properly reading liquid within those files.
My directories are structured as follows:
src/
As instructed, within page.our-story.js, I import my page.our-story.scss code:
page-our-story.js
import '../../styles/templates/page.our-story.scss';And within my theme.liquid, I import script and style tags:
theme.liquid
{% include 'style-tags', layout: 'theme' %}{% include 'script-tags', layout: 'theme' %}I have a liquid reference within my SCSS file:
page.our-story.scss:
background-image: url("{{ 'our-story-hero.jpg' | asset_url }}");But the liquid does not properly populate when I load up my site (e.g., it doesn't pull the URL of 'our-story-hero.jpg' from my assets folder; it maintains the
{{ 'our-story-hero.jpg' | asset_url }}syntax in my CSS code and throws an error because it's not valid CSS. This syntax seems to be included in a