Verwenden von Aliasen mit Sass-Loader zum Vermeiden relativer Pfadverwirrung

Question

Ich habe eine .scss Datei, in der ich ein Backgorund-Bild verwende (background-image: url('../../../image.png')). Das Webpack-Plugin file-loader erkennt dieses Bild und kopiert es, wenn ich meine App erstelle, was großartig ist.

Das Problem ist, dass ich ziemlich viele Bilder und ziemlich viele .scss Dateien habe, und ich habe eine riesige Sauerei, die in meinem Code mit allen relativen Importen geht.

Gibt es eine Möglichkeit, ich kann sagen, entweder file-loader oder sass-loader, wenn ich background-image: url('@alias/image.png') tun Ich beziehe mich auf den Ordner, in dem image.png ist?

Answer 1

Webpack unterstützt bereits diese https://github.com/webpack-contrib/css-loader#alias

Sie müssen nur den Alias ​​in css-loader ‚s Optionen Rüst- und verweisen das Bild als url(~alias/image.png)