Assets aren't copied with build (1.x)

[logandeancall]

Problem

Assets in the src/assets/images (svg, and any custom dir) do not copy over to dist/assets on yarn build

Replication steps

Put any files in the directories mentioned above, run yarn build. Assets will not be in dist

[t-kelly]

Very true! Looks like we're only copying over svgs to the snippets folder. On it.

[t-kelly]

Okay needed to validate a few things before I responded to this.

Copying static files from src/assets to dist/assets

Currently, src/assets/vendors is the only folder that has its contents copied directly to the dist/assets folder, e.g. src/assets/vendors/modernizr.js gets copied to dist/assets/modernizr.js.

In general, scripts should be imported into your main JS bundle through src/assets/scripts/theme.js and not via a Liquid file. Webpack will then be able to do what it does best and split dependencies into multiple bundles. These bundle <script> tags are injected into dist/layout/*.liquid files upon build.

There is currently a bug when including a script asset reference, e.g. {{ '../assets/vendors/modernizr.js' | asset_url }}, where it gets transformed into {{ [Object object] | asset_url }} and not {{ 'modernizr.js' | asset_url }}. This transformation happens so that in dev build (slate-tools start) we can reference the localhost, and then in prod build (slate-tools build) we can reference the lib uploaded on the Shopify CDN. To avoid this transformation and always reference the Shopify CDN, use double quotes, e.g. {{ "../assets/vendors/modernizr.js" | asset_url }}.

All other files and folders in the src/assets/ folder need to be referenced from an entry point, e.g. theme.js,

I think it might be an idea to change vendors to static? For me, vendors implies vendor JS and not any kind of file?

Referencing images in the src/assets/images/ folder

You can currently include image found in your src/assets/images/ in your theme liquid by referencing it with a relative path, e.g. <img src='{{ '../assets/images/lamp.png' | asset_url }}>'. This will get changed to <img src='{{ "lamp.png" | asset_url }}>' on build.

Referencing SVGs

The assets/svgs folder contents are copied to the dist/snippets/ folder and have their extension changed from .svg to .liquid. This is so you can include these SVGs inline in the page the same way you would a snippet, e.g. {% include 'icon-plus' %}. You could also include the svg the same as described above for an image, but then you don't have as much flexibility with the SVG like changing its color.

Referencing Fonts

Font's can be referenced from inside liquid files using a relative URL and the assets_url filter. This URL get's swapped for the correct URL on build. e.g.:

<style>
    @font-face {
      font-family: REZ;
      src: url({{ '../assets/fonts/REZ.ttf' | asset_url }}) format('truetype');
      font-style: normal;
      font-weight:  700;
    }
</style>

changes to

<style>
    @font-face {
      font-family: REZ;
      src: url({{ 'REZ.ttf' | asset_url }}) format('truetype');
      font-style: normal;
      font-weight:  700;
    }
</style>

Going to create a few followup issues about what I've talked about here.

[t-kelly]

Closing this in preference of the two issues I made above. Feel free to continue the conversation here if need be.

[schellenbergk]

assert_url -> asset_url?

[t-kelly]

@schellenbergk yes! Sorry typo :)

[rg-najera]

@t-kelly I see this is closed but I think further clarification is needed in the README regarding images.

When using asset_url as described above like so:

<img src="{{ '../assets/images/home/some_image.png' | asset_url }}"/>

The result while in dev adds the cdn path and adds the full path of the local image including the local domain:

<img src="//cdn.shopify.com/s/files/1/2643/4686/t/2/assets/https://localhost:8080/some_image.png?2881255340471558967">

Makes sense since what is being parsed out by webpack results in the following:

<img src="{{ 'https://localhost:8080/some_image.png' | asset_url }}"/>

if this is whats intended, I might just not be getting it.

Would be totally natural for webpack to instead strip the liquid tags completely and instead include only the src url since https://localhost:8080/some_image.png is available on request.

Note, when building, it seems to work fine though and it includes the striped out version of the liquid tag without a relative path.

[t-kelly]

@el-rotny can you please create a new issue for this, since it is unrelated to the title of this issue. Thanks.

[lock]

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.