Erledigt - Durch minifying vom CSS Bootstrap Symbole nicht mehr sichtbar

[Jamye]

Huhu Leute,
heute habe ich mal ein etwas spezielleres Problem.
Wenn ich im PhpStorm mithilfe des yuicompressors die bootstrap.css komprimiere, dann fehlen anschließend in der komprimierten Version alle Leerzeichen zwischen den einzelnen Angaben im "url" Attribut. Das führt dazu, dass alle über die URL eingebundenen SVGs anschließend nicht mehr angezeigt werden können.

Hier mal ein Beispiel:

Bootstrap normal:

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

Bootstrap komprimiert:

.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvgviewBox='003030'xmlns='http://www.w3.org/2000/svg'%3e%3cpathstroke='rgba(255,255,255,0.5)'stroke-width='2'stroke-linecap='round'stroke-miterlimit='10'd='M47h22M415h22M423h22'/%3e%3c/svg%3e")
}

Hat noch jemand das Problem und möglicherweise sogar eine Lösung dafür?

 

[Myhar]

yuicompressor wird doch, soweit ich das richtig im Kopf habe, schon seit 4-5 jahren nicht mehr weiterentwickelt.
Das Problem besteht schon seit 2015, dieses Jahr hat jemand einen Pullrequest dafür erstellt welcher das Problem wohl fixed. https://github.com/yui/yuicompressor/pull/319

Du kannst versuchen die Änderungen in dein yuicompressor files einzuspielen, bzw vielleicht reicht es auch aus, wenn du die url base64 encodierst, siehe auch https://stackoverflow.com/questions/13949588/yui-compressor-is-removing-spaces-from-filter-values .

Ansonsten: Warum verwendest du yuicompressor überhaupt, wieso verwendest du nicht grunt/webpack/gulp um deine Dateien zuerst von sass zu css zu konvertieren und danach dann erst minifizieren?

 

[Jamye]

Ich hatte gar nicht auf dem Schirm, dass der yuicompressor gar nicht mehr aktualisiert wird. Genutzt habe ich ihn, da ich neuerdings mit phpstorm arbeite und Google mir als erste Lösung zur Komprimierung des css den yuicompressor in Verbindung mit dem Filewatcher ausgegeben hat.

Dann werde ich mal mit Grunt arbeiten.

Vielen Dank für deine schnelle Antwort.