failed to resolve image Url with in Css files.

[bibekluitel]

HI, After usignn reactCssModules in i am not able to convert the image urls inside Js file.

This are my webpack.mix.js

mix.react('resources/assets/js/app.js', 'public/js').reactCSSModules();

mix.copyDirectory('resources/assets/images', 'public/images');

this is in my app.css file

.laravelt {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  background-image: url('../../images/nn.jpg');
}

this is in my React file

import styles from './app.css';

export default class Example extends Component {
    render() {
        return (
            <div className={styles.laravelt}>
              test
            </div>
        );
    }
}

And i got error after running npm run build

ERROR in ./resources/assets/images/nn.jpg Module build failed: Error: write EPIPE at exports._errnoException (util.js:1050:11) at WriteWrap.afterWrite [as oncomplete] (net.js:814:14) @ ./node_modules/css-loader??ref--5-1!./resources/assets/js/components/app.css 7:141-171

[leinelissen]

Hi there! Thanks for using my package.

As far as your setup goes, it looks pretty fine. The only thing is that by default, images are automatically handled by Laravel Mix. This means that when you do a url() call in your CSS, Webpack will find the image and include it in the generated bundle. Thus, you need to make sure that the path you put in the url() function is relative the your CSS file, rather than relative to the public directory. Check the Laravel Mix Docs for more info on this process.

I hope this solves your problem! I will close your issue for now, but please let me know if there is a problem relating to this package.