laravel mix sass images not found/hash

Question

I am working for the first time with Laravel. With the 5.4 version they introduced the laraval mix. I tried to paste my SASS of the static website (I compile this with gulp) into sass files in the resources folder. This goes all well, my SASS will be compiled to the app.css file in the public map.

I have 1 main problem. All images in the sass files (resources/assets/images) are not compiling as I would like to have.

Code in SASS file (resources/assets/SASS/banners.scss)

section.module.parallax-1 {
  background-image: url('../images/banner1.jpg');
}

Compiled with mix in (app.css)

section.module.parallax-1 {
  background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85);
}

So instead of compiling the url to css like I have it in my SASS file, it compiles it to something different with the hash at the end. Also, after compiling the sass it generates a images map with the images I used in my SASS files. My images map originally is located at resources/assets/images.

I don't know what I am doing wrong. I've tried to change the url in my sass files but this will not help. Is there someone who can help me out? Or is there a other solution for this?

webpack.mix code / js

const mix  = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Answer 1

I had the same issue right now. As far as I can see this is no longer the case in the newest laravel mix version. But since its not yet up on npmjs

You can use the following fix:

in webpack.mix.js add

mix.options({
  processCssUrls: false // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
});

Then copy node_modules/laravel_mix/setup/webpack.config.js to your root directory.

(Same as where the webpack.mix.js is)

Find and remove this string from your new webpack.config.js file

{ loader: 'resolve-url-loader' + sourceMap },

When thats done you have to update your npm scripts to use your webpack.config.js file.

In your package.json use these scripts instead

"scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
},