アプリケーションをビルドするときにYe​​omanベンダーの画像パスが正しくない

Question

私はYeomanでAngularJSアプリケーションを開発しています。

アプリケーションは、Bowerと共にインストールされる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 --> 

アプリケーションを構築し、すべてがエラーなしで、うまくいけ：これは、私はjQueryのUIのテーマを含ん方法です。

しかし、ブラウザコンソール（Chromeを使用）では、styles/images/の内部にあり、実際にはcomponents/...の内部にあるため、jQuery UI Datepickerに必要な画像が見つからないことがわかりました。

スクリーンショット

私の最初のアイデアは、CSSでjQueryのUI画像のパスを上書きすることでしたが、それは最善の解決策のように見えるしていません。例：

オリジナルスタイリング

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

マイオーバーライド

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

どれ推奨ソリューション？

Answer 1

私は同じ問題を抱えていました。しかし、jQuery CSS（今後のアップデートでは有害な可能性があります）を変更するのではなく、gruntスクリプト（Gruntfile.js）の "imagemin"タスクを微調整して、画像が期待通りにコピーされるようにしました。これは、gruntが縮小されたCSSで画像pathesを修正するのを担当している限り、任意のサードパーティのライブラリに当てはまります。後

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

：

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

ここ

は、私が行った変更（私のjQuery UIテーマフォルダがapp\stylesフォルダの下にあることに注意してください）

は前にありますお役に立てれば ！