error with webpack, npm, lightbox2 - image locations

[avianion]

getting this error when loading the .min.css file

its because theres .png files in the css

is there any way to get rid of them or load the css otherwise becc ause i can tseem to put the images in the correct location :(

webpack_1 | ERROR in ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) webpack_1 | Module not found: Error: Can't resolve '../images/close.png' in '/app/assets/app' webpack_1 | @ ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) 33:37-67 webpack_1 | webpack_1 | ERROR in ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) webpack_1 | Module not found: Error: Can't resolve '../images/loading.gif' in '/app/assets/app' webpack_1 | @ ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) 30:37-69 webpack_1 | webpack_1 | ERROR in ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) webpack_1 | Module not found: Error: Can't resolve '../images/next.png' in '/app/assets/app' webpack_1 | @ ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) 32:37-66 webpack_1 | webpack_1 | ERROR in ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) webpack_1 | Module not found: Error: Can't resolve '../images/prev.png' in '/app/assets/app' webpack_1 | @ ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) 31:37-66

[lokesh]

I don't the details of your webpack and postcss-loader config so am not certain how to resolve your specific issue. You could 'monkey patch' it by moving the CSS and images into your project from the node_modules folder, as they are minimal and not getting substantial updates at this time.

Either way, for further help on set up issues, I recommend posting on Stackoverflow and including relevant configuration details. There are lots of great people available to help over there.

[DACbyJS]

Those of you out in the devosphere who are also struggling with the ol' Can't resolve '../images/prev.png' error because you've got the webpack/npm setup and in your travels have arrived here...

I simply moved the node_modules/lightbox2/dist/images/ to exactly where the error told me it was trying to resolve it.

In my case it looked like: ERROR in ./src/sass/index.scss Error: Can't resolve '../images/prev.png' in {local-path-to-my-app} . '/assets/src/sass'.

So I did this:

Sure enough my mini-css-extract-plugin with webpack picked up on it right away:

    [./src/images/close.png] 44 bytes {mini-css-extract-plugin} [built]
    [./src/images/loading.gif] 46 bytes {mini-css-extract-plugin} [built]
    [./src/images/next.png] 43 bytes {mini-css-extract-plugin} [built]
    [./src/images/prev.png] 43 bytes {mini-css-extract-plugin} [built]

I did this because I can manage dependencies with npm still for css/js in lightbox2 and I needed to edit the images anyway to match my app's theme. I'm sure there is someway within the webpack universe to make sure the it resolves images references in css/sass/scss in node_modules in the relative path to the file instead of the src/build's files, but there's alot of trial and error with webpack and we're all usually on a deadline of some sort, amiright?

Hope it helps!