Laravel Mix Sass Bilder nicht gefunden/Hash

Question

Ich arbeite zum ersten Mal mit Laravel. Mit der Version 5.4 haben sie den Laraval Mix eingeführt. Ich habe versucht, meine SASS der statischen Website (ich kompiliere dies mit Schluck) in Sass-Dateien in den Ressourcen-Ordner einfügen. Das geht alles gut, mein SASS wird in die Datei app.css in der öffentlichen Karte kompiliert.

Ich habe 1 Hauptproblem. Alle Bilder in den Sass-Dateien (Ressourcen/Assets/Bilder) kompilieren nicht so, wie ich es gerne hätte.

-Code in SASS-Datei (Ressourcen/assets/SASS/banners.scss)

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

mit Mix Zusammengestellt in (app.css)

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

Anstatt also die Erstellung der URL zu CSS Wie ich es in meiner SASS-Datei habe, kompiliert es es zu etwas anderem mit dem Hash am Ende. Außerdem erzeugt es nach dem Zusammenstellen des Sass eine Bilderkarte mit den Bildern, die ich in meinen SASS-Dateien verwendet habe. Meine Bilder-Map befindet sich ursprünglich unter Ressourcen/Assets/Bilder.

Ich weiß nicht, was ich falsch mache. Ich habe versucht, die URL in meinen Sass-Dateien zu ändern, aber das wird nicht helfen. Gibt es jemanden, der mir helfen kann? Oder gibt es dafür eine andere Lösung?

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

hatte ich das gleiche Problem jetzt. Soweit ich das sehen kann, ist dies in der neuesten Laravel-Mix-Version nicht mehr der Fall. Da aber seine noch nicht bis auf npmjs

Sie können folgende Update verwenden:

in webpack.mix.js hinzufügen

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

Dann node_modules/laravel_mix/setup/webpack.config.js zu Ihrem Root-Verzeichnis kopieren.

(Das gleiche wie in dem der webpack.mix.js ist)

finden und diese Zeichenfolge von Ihrem neuen webpack.config.js

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

Wenn das ist, getan Sie aktualisieren müssen Datei entfernen Ihre Npm-Skripte, um Ihre webpack.config.js Datei zu verwenden.

In Ihrem package.json Gebrauch diese Skripte stattdessen

"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" 
},