Yeoman Vendor Bilder Pfade sind falsch beim Erstellen der Anwendung

Question

Ich arbeite an einer AngularJS-Anwendung mit Yeoman.

Die Anwendung hängt von der jQuery UI ab, die mit Bower installiert wird. Dies ist, wie ich die jQuery UI Thema sind:

<!-- build:css styles/plugins.css --> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.core.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.accordion.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.autocomplete.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.button.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.datepicker.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.dialog.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.menu.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.progressbar.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.resizable.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.selectable.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.slider.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.spinner.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.tabs.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.tooltip.css" /> 
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.theme.css" /> 
<!-- endbuild --> 

Wenn die Anwendung den Aufbau, alles gut geht, ohne Fehler.

Allerdings kann ich in der Browser-Konsole (mit Chrome) sehen, dass die von der jQuery UI Datepicker benötigten Bilder nicht gefunden werden können, da sie innerhalb styles/images/ aussieht und sie tatsächlich in components/... sind.

Screenshot

Meine erste Idee, die jQuery UI Bildpfade in CSS außer Kraft zu setzen, sondern dass wie die beste Lösung scheint nicht. Beispiel:

Original-Styling

.ui-state-error .ui-icon, 
.ui-state-error-text .ui-icon { 
    background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; 
} 

Meine Überschreibung

.ui-widget-header .ui-state-error { 
    background-image: url(../components/jquery.ui/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png); 
} 

Alle empfohlenen Lösungen?

Answer 1

Ich hatte das gleiche Problem. Aber anstatt das jQuery-CSS zu ändern (was für zukünftige Updates schädlich sein könnte), habe ich nur die "imagemin" -Aufgabe im grunt-Skript (Gruntfile.js) optimiert, so dass die Bilder dorthin kopiert werden, wo sie erwartet werden. Dies gilt für jede Bibliothek von Drittanbietern, solange Grunt sich darum kümmert, die Bildpfade im minimierten css zu modifizieren. Hier

ist die Veränderung, die ich gemacht (bitte beachten Sie, dass meine jQuery UI Theme-Ordner unter dem app\styles-Ordner befindet)

Vorher:

imagemin : { 
    dist : { 
     files : [{ 
       expand : true, 
       cwd : '<%= yeoman.app %>/images', 
       src : '{,*/}*.{png,jpg,jpeg}', 
       dest : '<%= yeoman.dist %>/images' 
      } 
     ] 
    } 
} 

Nach:

imagemin : { 
    dist : { 
     files : [{ 
       expand : true, 
       cwd : '<%= yeoman.app %>/images', 
       src : '{,*/}*.{png,jpg,jpeg}', 
       dest : '<%= yeoman.dist %>/images' 
      }, { 
       expand : true, 
       flatten : true, 
       cwd : '<%= yeoman.app %>/styles', 
       src : '**/*.{png,jpg,jpeg,gif}', 
       dest : '<%= yeoman.dist %>/styles/images' 
      } 
     ] 
    } 
} 

Hoffe das hilft !