In meinem Projekt verwende ich einige Ressourcen (hauptsächlich Bilder) sowohl in SASS als auch in Blade. Außerdem habe ich einige Ressourcen, die nur in SASS verwendet werden, und einige, die nur in Blade verwendet werden.
Zum Beispiel könnte ich mix('images/logo.png')
in Blade-Dateien und background: url('../images/logo.png')
in SASS-Dateien verwenden.
In Bezug auf meine Verzeichnisstruktur habe ich Folgendes getan:
- resources
- js
- sass
- images // All images used by Blade, Sass, or both
- fonts
Um meine Ressourcen zu kompilieren und in den public
Ordner zu legen, gehe ich wie folgt vor webpack.mix.js
:
mix.copy('resources/images/**/*.*', 'public/images');
mix.copy('resources/fonts/**/*.*', 'public/fonts');
mix.version('public/images/**/*.*');
mix.version('public/fonts/**/*.*');
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/vendor.js', 'public/js')
.scripts([ // Old not ES6 JS
'resources/js/tpl/core.min.js'
], 'public/js/core.min.js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
.version();
Im Ergebnis erhalte ich diese URL in app.css:
background: url(/images/logo.png?0e567ce87146d0353fe7f19f17b18aca);
Während ich einen anderen in gerendertem HTML bekomme:
src="/images/logo.png?id=4d4e33eae039c367c8e9"
Sie werden als 2 verschiedene Ressourcen betrachtet, das habe ich nicht erwartet ...
Mögliche Problemumgehung
Ich entdeckte , dass CSS - Dateien von SASS Verwendung erzeugt eine versionierte URL , auch wenn ich nicht angeben , version()
in webpack.mix.js
. Also habe ich mich gefragt, ob ich vielleicht einen Trick wie diesen gebrauchen könnte:
const sass = require('sass');
// Custom SASS function to get versioned file name
// Uses Mix version md5 hash
const functions = {
'versioned($uri)': function(uri, done) {
uri = uri && uri.getValue() || uri;
const version = File.find(path.join(Config.publicPath, uri)).version();
done(new sass.types.String(`${uri}?id=${version}`));
}
};
mix.sass('resources/sass/all.scss', 'public/css', {
sassOptions: {
functions
}
})
.options({ // Do not process URLs anymore
processCssUrls: false
});
Und verwenden Sie es in SASS wie folgt:
background-image: url(versioned('/images/logo.png'));
Diese Lösung hat jedoch viele Nachteile: Ich muss die versioned
Funktion jedes Mal verwenden, mein Quellcode funktioniert in anderen Projekten ohne die webpack.mix.js
Funktion nicht einfach und ich muss alle Dateien bearbeiten, die ich in meinem Ressourcenordner verwende, um sie zu verwenden die Funktion.
Andere Lösung?
Ich denke, die Ursache meines Problems könnte in der Art und Weise liegen, wie ich meine Dateien strukturiert habe. Ich habe einen resources/images
Ordner, der Bilder enthält, die von SASS, aber auch von Blade verwendet werden.
In SASS verwendete Bilder werden kopiert, public/images
da SASS auf diese Weise mit Webpack funktioniert, und diese Bilder werden auch ein zweites Mal kopiert, weil ich sie verwendet habe mix.copy()
(da sich die anderen Dateien im öffentlichen Ordner befinden müssen, um in Blade zugänglich zu sein / HTML).
Ich bin mir ziemlich sicher, dass ich mich irgendwo irre. Ich habe im Internet nach einer geeigneten Möglichkeit gesucht, mit SASS- und Blade-Ressourcen in Laravel zu arbeiten, aber ich habe nichts Relevantes gefunden.
Vielleicht sollte ich eine andere Dateistruktur in Betracht ziehen? Aber welcher ?
mix.version()
und für CSS-Dateien gibt es einen eigenen File Loader mit eigener Hashing-Funktion. Es hat nichts mit der Dateistrukturierung zu tun. Ihre vorgeschlagene Problemumgehung scheint eine gute Option zu sein. Ich glaube nicht, dass es eine native Lösung für dieses Problem gibt.Antworten:
Das Umschreiben
url()
in Stylesheets ist eine Webpack-Funktion , bei der der berechnete MD5-Hash der Datei an die URL angehängt wird.mix.version()
Auf der anderen Seite wird dank dieser Zeilen ein anderer Hash generiert :Laravel Mix liest die Datei als Zeichenfolge (nicht als Puffer), hasht sie und extrahiert nur die ersten 20 Zeichen. Ich kann keinen einfachen Weg finden, um dieses Verhalten zu überschreiben. Eine schnelle und schmutzige Problemumgehung ist die Neudefinition der
hash
Funktion:Eine bessere Möglichkeit besteht darin , Laravel Mix zu erweitern und Ihre eigene
versionMD5()
Methode zu definieren. Möglicherweise kopieren Sie Code aus dieser Erweiterung .quelle