4

I am attempting to use Chirpy to mash all the CSS files from various sub directories into a single file.

This works to the extent that I get a single minified file containing all of the CSS.

The problem I am having is that the CSS files that are referenced contain relative paths to images so when mashed the resulting file contains CSS with invalid image references.

For example:

<!-- Jquery -->
<File Path="ThirdParty\Jquery\jquery-ui-1.8.custom.css" />
<File Path="ThirdParty\Jquery\Plugins\colorbox\colorbox.css" />

<!-- Ext -->
<File Path="ThirdParty\Ext_3.2.1\ux\LockingGridView.css" />
<File Path="ThirdParty\Ext_3.2.1\plugins\Schedule_1.7\css\sch-all.css" />

Each of these files contains entries along the lines of:

.ui-widget-header { url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) }

When this entry gets "Mashed" into a central file in another location the url is no longer valid.

Does anyone know of a way around this other than updating all of the urls in every CSS file?

(I am wondering whether the YUI compression tool via chirpy can do this for me).

I would like to avoid absolute urls because the site code is re-used in sub directories on the same web server.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Leather
  • 227
  • 2
  • 6
  • All images should be located in one folder and everyone should point to them. Having them duplicated is not a good idea. That would automatically solve your issue as you can refer them from site root or some common path. – Mrchief Jul 22 '11 at 14:24
  • Hi Mr Chief, thanks for your response but I think you have misunderstood the question. The images are NOT duplicated. I simply have various CSS files from third parties, such as Jquery, with their associated images. I am trying to combine the CSS files into a single file to improve performance. – Leather Jul 22 '11 at 14:37
  • In that case, I think the safest bet would be to not rely on Chirpy's (or someone else's) intelligence and do a bit of tedious manual work to change the URL paths to absolute paths yourself. E.g. `/images/ui...png`, `/images/thirdParty/img...png`. – Mrchief Jul 22 '11 at 14:41
  • it's not as simple as that... if I am running in debug mode I would like to use the original files as is. Similarly if I download new versions of Jquery, ExtJs, or any of the various plug ins we are using I don't want to have to manually update the files. – Leather Jul 22 '11 at 14:46
  • Hmm... the plot thickens. Well, if you can find a Chirpy solution, it'd be nice. Otherwise, consider writing a `UrlRewriter` `HttpModule`. – Mrchief Jul 22 '11 at 14:53
  • 2
    I am currently trying Telifun Crusher which seems to do it out of the box.. Here's a link if you are interested: http://code.google.com/p/talifun-web/wiki/CrusherModule – Leather Jul 22 '11 at 15:00
  • Did you get either solution to work? I'm running into the same issue. – Kyle Jun 29 '12 at 19:48
  • Hi Zenox, no I didn't get the Chirpy compressor working. I switched to the Telifun script crusher and never looked back. I may switch to the built in minification/bundling in MVC 4 now though. – Leather Nov 14 '12 at 11:07

1 Answers1

0

I suggest switching to Sass / SCSS combined with Scout App. That way, you can @include all helper sheets (like mixins or themes) in the main one, that is compiled and minified into a single css file.

All css files work seamlessly as scss, so no headache there.

My coding (and life) have so much improved after this upgrade.

Marius Stuparu
  • 474
  • 3
  • 14