Incorrect provider image paths when creating application

Question

I am working on an AngularJS application with Yeomen.

The application depends on the jQuery user interface that is installed with Bower. This is how I include the jQuery UI theme:

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

When you create an application, everything goes well, without errors.

However, in the browser console (using Chrome), I see that the images required by jQuery UI Datepicker cannot be found because they look inside styles/images/ and they are actually inside components/...

Screenshot

My first idea was to override jQuery UI image paths in CSS, but this doesn't seem like a better solution. Example:

Original style

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

My redefinition

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

Any recommended solutions?

Answer 1

I had the same problem. But instead of modifying jQuery CSS (which may be harmful for future updates ...), I just changed the "imagemin" task in the grunt script (Gruntfile.js) so that the images are copied where they are expected. This is true for any third-party library, while grunt will take care of changing the pattern of images in mini css.

Here is the change I made (note that my jQuery UI theme folder is in the app\styles folder)

Before:

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

After:

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

Hope this helps!