Help: Build error when loading images about shopify-packer HOT 2 CLOSED

I really appreciate the suggestions.
However, the errors have more to do with webpack config, than how I set up the src directory.

I solved it by npm installing file-loader, and adding the following rules to the prod.config.js file:

{
   test: /\.(woff(2)?|png|svg|jpg|gif|ttf|otf|eot)$/,
   use: ["file-loader"],
 }

Thanks for an awesome package.

from shopify-packer.

On Shopify all files are flat and use CDN so you can't link to an image in css using url(../images/fancybox_loading.gif)

See Styles with Liquid for more information

Typically if you need an image inside the stylesheet you have a few options:

1. add to theme.scss.liquid using liquid, ex: url({{ 'fancybox_loading.gif' | asset_img_url }})
2. use the library CDN for css: <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
3. use the dist/css for the package. Note this is dependent on the library you are using

yarn add @fancyapps/fancybox

4. You could make the above URL's work while in development mode by adding the proper directory and settings to file loader but you would still need to do one of the 3 solutions above to deploy on Shopify.

I typically use option 3 (if it's supported), otherwise option 1 or 2.

@import "~@fancyapps/fancybox/dist/jquery.fancybox.css"

This is a common issue with Shopify, especially when working with prebuilt HTML.

from shopify-packer.