Assets (SVG and Images) in SCSS

[jonathanmoore]

Problem

Re-opening issue #610. I am having trouble working with SVG and image assets inside any of the SCSS files. Reading through the details of #850 (Simplify Slate Assets) it seems like it should be straightforward, however, I'm unable to find a way to access assets in SCSS files (not .scss.liquid).

During a deploy the asset URL is properly added to the generated CSS file, however, it seems like it is broken for watch or start.

Replication steps

theme.scss

$icon-ui-warn: '{{ "icon-ui-warn.svg" | asset_url }}';
.error-icon {
  background-image: url($icon-ui-warn);
}

1. Run yarn start
2. Verify the asset exists and properly copied to /dist/assets
3. {{ "icon-ui-warn.svg" | asset_url }} is added as a string rather than referencing the local asset
4. Run yarn deploy
5. Asset url is properly returned and displayed

[YourWishes]

(Correct me if I'm incorrect) but I believe you can simply use a url() and use a relative path to the file within the assets directory.. that's what I've been doing with my SVG assets from within JS so I assume it will resolve the same for SCSS?

e.g. <img src="${ require('./../../../assets/svgs/icon-plus.svg') }" class="o-btn__icon" />

is what I'm doing from within JS.. Testing quickly I've also done background-image: url('./../assets/svgs/icon-hamburger.svg'); within SCSS

[jonathanmoore]

Wow. Thank you @YourWishes! That does work, and I now see how it's explained in #850.

Slate also attempts to serve assets from a local asset server by using relative paths: {{ '../assets/my-image.jpg' | asset_url }} And then swaps the path for one that references the dev machine's local IP when in development, or one that will result in a valid cdn.shopify.com path for production build. This works great when the tag is structured exactly like the above, but breaks for examples like the following:

Using the same example as above, here is the correct approach that works for both local and deployed Slate.

$icon-ui-warn: '../assets/svg/icon-ui-warn.svg';
.error-icon {
  background-image: url($icon-ui-warn);
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.