1

When I run npm run build the images from .html files are loaded / copied. But the ones from the css file doesn't get copied in the final dist/assets/img folder.

And if I use copy-webpack-plugin, everything is ok assets folder is copied. But I cache the images so I will have duplicates with the ones in .html files.

Here you have my config files.

Arseniy-II
  • 8,323
  • 5
  • 24
  • 49

2 Answers2

0

You have disabled url/image-set functions handling for css-loader in file webpack.prod.js line 52:

{ loader: 'css-loader', options: { url: false, sourceMap: true } },

replace it with:

{ loader: 'css-loader', options: { sourceMap: true } },

Arseniy-II
  • 8,323
  • 5
  • 24
  • 49
  • Now it copies the image but in the end `css` file the source is not the same as in development from `scss` file. In `scss` file is: `background: url('../imgs/photo')` And in `css` file is: `background: url('assets/imgs/photo')`. –  Aug 15 '19 at 11:19
  • @grecdev. That is good. Now problem is with [publicPath](https://webpack.js.org/configuration/output/#outputpublicpath). You need to add proper path: in `webpack.prod.js` between lines 16 and 17 – Arseniy-II Aug 15 '19 at 11:51
  • @grecdev try add `publicPath: '/'`. Can't guarantee that will solve your problem but it might. If not read [the docs](https://webpack.js.org/configuration/output/#outputpublicpath). Check your css output when you do production build and what it should be in order to upload your image and adjust your `publicPath` respectively – Arseniy-II Aug 15 '19 at 11:53
  • Now in `scss` development file have: `background: url("../imgs/photo.jpg") no-repeat center/cover;` And in build file i have: `background:url(assets/imgs/photo.78c8366fa04b91d536cd4a3d5b3b9334.jpg)` So i see that in build file the url is not relative to the image hmm.. –  Aug 15 '19 at 12:20
  • @grecdev and what is expected path in build file? Please check your build folder. Be sure that if you replace wrong url with correct url using devtools you should see your image. – Arseniy-II Aug 15 '19 at 12:23
  • I wanted to say that the `url` from `build end files` should be the same as `scss dev files`. but in build is `assets/imgs` not `../imgs` as it should be. –  Aug 15 '19 at 12:37
  • It depends on how you serve your files on server side. If you serve all your files from `dist` folder your path most likely should be "/assets/imgs", notice "/" at the beginning. And not "../imgs". But I don't know how you serve them exactly. You may try `publicPath: '../'` – Arseniy-II Aug 15 '19 at 12:44
0

I figured out. Got the solution from here.

Here is the previous gist that i modified, only for config and prod files.