Ścieżki obrazów dostawcy usługi są nieprawidłowe podczas budowania aplikacji.

Question

Pracuję nad aplikacją AngularJS z Yeomanem.

Aplikacja zależy od interfejsu użytkownika jQuery, który jest instalowany z Bower. W ten sposób dołączam motyw jQuery UI:

<!-- 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 --> 

Podczas tworzenia aplikacji wszystko idzie dobrze, bez błędów.

Jednak w konsoli przeglądarki (przy użyciu Chrome) widzę, że obrazy wymagane przez jQuery UI Datepicker nie mogą zostać znalezione, ponieważ wyglądają wewnątrz styles/images/ i faktycznie są wewnątrz components/....

Zrzut

Moim pierwszym pomysłem było zastąpić ścieżki obrazu jQuery UI w CSS, ale nie wydaje się najlepszym rozwiązaniem. Przykład:

Oryginalna stylistyka

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

Moje przesłanianie

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

zalecanych rozwiązań?

Answer 1

Miałem ten sam problem. Ale zamiast zmiany kodu CSS jQuery (który może być szkodliwy dla przyszłych aktualizacji ...), po prostu zmodyfikowałem zadanie "imagemin" w skrypcie pomruku (Gruntfile.js), aby obrazy były kopiowane tam, gdzie są oczekiwane. Dotyczy to dowolnej biblioteki stron trzecich, o ile mruk zajmie się modyfikowaniem obrazów pathes w skróconych css.

Oto zmiana zrobiłem (proszę pamiętać, że mój folder motyw jQuery UI znajduje się w folderze app\styles)

Przed:

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

Po:

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' 
      } 
     ] 
    } 
} 

Mam nadzieję że to pomoże !