응용 프로그램을 빌드 할 때 Yeoman 공급 업체 이미지 경로가 올바르지 않습니다.

Question

저는 Yeoman과 함께 AngularJS 응용 프로그램을 작성 중입니다.

응용 프로그램은 Bower와 함께 설치되는 jQuery UI에 따라 다릅니다. 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 --> 

응용 프로그램을 빌드 할 때 모두 오류없이 잘됩니다.

그러나 브라우저 콘솔 (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 (미래의 업데이트에 해를 끼칠 수 있음)를 변경하는 대신 그랑트 스크립트 (Gruntfile.js)에서 "imagemin"작업을 수정하여 이미지가 예상대로 복사되도록했습니다. 이것은 제 3 자 라이브러리에 대해 사실이며, 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 폴더 아래에 참고하시기 바랍니다)

전입니다 희망이 도움이!