Images don't copy dist

[astranavt]

Describe the bug
When you build a project, the images directory does not contain images that are in src/images

To Reproduce
Steps to reproduce the behavior:

1. npm run build:dist
2. open dist/images
3. try to find images

Desktop (please complete the following information):

• OS: ubuntu 16.04, macOS Mojave

[astranavt]

The problem is that in my scss file I have specified the path relative to the site, so the webpack just does not find the file. The path must be specified based on the directory structure namely
example:
src/
-images
-stylesheets
--styles.scss
in styles.scss path must be:
background: url("../images/pic1.jpeg");

[ericalli]

That's right, the path must be based on the src directory structure. I've added this to the documentation.

Closing this for now, let me know if you have any further issues. Thanks!

[iign]

Hey, I'm bringing this up again because I had the same issue, originated by a different cause.
I have a couple JPGs that are not referenced in the stylesheets and wanted to be copied to dist folder, because they're being used via JS.

I think every image from /images should be copied over to /dist/images. Is there a reason not to?

Thanks!
PS: Thanks again for a very interesting and useful project!

[tolchai]

Hey. I have a similar problem - can't figure out how to show image as inline background-image within style attribute. What is the right approach here? Thanks!

[iign]

Hey @tolchai, sorry I didn't clarify. The workaround I found is to link the file on my Sass, but never actually using that way on my frontend. Like so:

// This is to force the compilation into copying images to dist folder.
.dummy {
  background-image: url("../images/bg-1.jpg");
  background-image: url("../images/bg-2.jpg");
}

[tolchai]

@iign Thanks! It's definitely not ideal, but it's working ) Also there is this problem with srcset #23. Best solution would be probably the one you have already mentioned here - just copy the whole content of /images folder to dist during build.

[iign]

Yeah, I guess achieving that wouldn't be so difficult if one knows their way around webpack 🤔

[adamdipardo]

Ran into this problem as well, it's a Webpack thing. See https://stackoverflow.com/questions/48704770/webpack-is-not-copying-images-to-dist-folder which suggests the copy webpack plugin.

I implemented it into my project by editing the webpack.plugins.js file and adding the code:

const CopyPlugin = require('copy-webpack-plugin');

const copyPlugin = new CopyPlugin([
  {
    from: 'images/**',
    to: 'images/',
    flatten: true
  }
]);

And then adding the copyPlugin to the module.exports at the bottom:

config.env === 'production' && copyPlugin,

Now when I run the dist build, it copies all the images over too.