Change CSS images URLs

sage
1

Hi there!

I am pretty new to the bower/gulp system and there is some mysterious things around this for me, I must admit.

So, I load jQuery UI (js and CSS) through bower.json and move JS/CSS/Images with those lines :

"jquery-ui": {
    "main": [
     "./jquery-ui.min.js",
     "./themes/base/jquery-ui.min.css",
     "./themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png",
     "./themes/base/images/ui-bg_flat_75_ffffff_40x100.png",
     "./themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png",
     "./themes/base/images/ui-bg_glass_65_ffffff_1x400.png",
     "./themes/base/images/ui-bg_glass_75_dadada_1x400.png",
     "./themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png",
     "./themes/base/images/ui-bg_glass_95_fef1ec_1x400.png",
     "./themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png",
     "./themes/base/images/ui-icons_2e83ff_256x240.png",
     "./themes/base/images/ui-icons_222222_256x240.png",
     "./themes/base/images/ui-icons_444444_256x240.png",
     "./themes/base/images/ui-icons_454545_256x240.png",
     "./themes/base/images/ui-icons_555555_256x240.png",
     "./themes/base/images/ui-icons_777620_256x240.png",
     "./themes/base/images/ui-icons_777777_256x240.png",
     "./themes/base/images/ui-icons_888888_256x240.png",
     "./themes/base/images/ui-icons_cc0000_256x240.png",
     "./themes/base/images/ui-icons_cd0a0a_256x240.png",
     "./themes/base/images/ui-icons_ffffff_256x240.png"
   ]
}

The problem I have is that the URLs used in jquery-ui.min.css still point to dist/styles/images/ in main.css. Is there a way to change this ?

Many thanks!

Oh and by the way, thanks for Sage, it is a great starter theme! :smile:

2

I think the idea is that you load just the jquery-ui package through bower, not the individual files. That way bower knows where to find the parts it needs.

Like this:

3

Hi!

Thanks for the answer!

So, if I understand it correctly, I just have to do this:

bower install --save jquery-ui

It was what I started to do first, but the problem is that no css were included somehow in main.css and main.scss were unchanged. That’s why I tried with overrides. Now jQuery UI css is available but the images cannot be found. Maybe there is something that I didn’t understand !

4

There are packages which don’t always work as expected, and I’ve had to do some fiddling. I think you need to run gulp to get the files to process and save - after that you should see the js and css files in the dist folder.

5

@austin provides some really great troubleshooting steps in this thread, they really helped me when I was struggling with this:

6

Many thanks for the answer!
I will take at this thread and see if I can do something ! :smile:

7

can you post the solution to this problem? :smiley:
I am facing the exact same thing… for the last 2 hours now :frowning: