Yeoman satıcısı görüntü yolları, uygulama oluştururken hatalı

Question

Yeoman ile bir AngularJS uygulamasında çalışıyorum.

Uygulama, Bower ile birlikte yüklenen jQuery UI'ye bağlıdır.

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

uygulama oluşturmaya, tüm hatasız, iyi gider: Bu jQuery UI tema içerir nasıl.

Ancak, tarayıcı konsolunda (Chrome kullanarak), jQuery UI Datepicker'ın gereksinim duyduğu görüntülerin, styles/images/ içine girdiğinden ve aslında components/... içinde bulunduğunu görebiliyorum.

Benim ilk fikir CSS jQuery UI görüntü yolları geçersiz kılmak için, ama bu en iyi çözüm gibi görünmüyor

ekran görüntüsü. Örnek:

Orijinal stil

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

Benim geçersiz kılma

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

Herhangi önerilen çözümler?

Answer 1

Aynı problem vardı. Ancak jQuery CSS'yi (gelecekteki güncellemeler için zararlı olabilir) değiştirmekten ziyade, grunt komut dosyasında (Gruntfile.js) "imagemin" görevini değiştirdim, böylece görüntüler beklendiği yerde kopyalandı. Bu, tümleşik üçüncü taraf kütüphanesinde görüntü yollarının değiştirilmesine özen gösterdiği sürece, herhangi bir üçüncü taraf kitaplığı için geçerlidir.

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

sonra::

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

İşte

yaptığım değişiklik (benim jQuery UI tema klasörü app\styles klasörü altında bulunur lütfen unutmayın)

önce olduğu Bu yardımcı olur umarım !