I'm working on an AngularJS application with Yeoman.
The application depends on jQuery UI, which 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 building the application, all goes well, without errors.
However, in the browser console (using Chrome), I can see that the images required by the jQuery UI Datepicker can't be found because it looks inside styles/images/
and they actually are inside components/...
.
Screenshot
My first idea was to override the jQuery UI image paths in CSS, but that doesn't seem like the best solution. Example:
Original styling
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/;
}
My override
.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?