Sometimes Cassette doesn't rewrite a background-image rule

Question

Context: http://getcassette.net/documentation/stylesheets

Specifically:

Image URLs in the CSS are rewritten. For example, a file ~/styles/main.css, with the content:

body { background-image: url(img/bg.jpg); }

is transformed into:

body { background-image: url(/_assets/images/styles/img/bg_25cb72e61bd5ag2_jpg);

---

Now in my particular case for example, in my .less file, I might have a rule like this:

.ribbon {
    background: url("/Public/image/blue-rib.png") no-repeat;
}

And Cassette is supposed to rewrite it and the browser actually receives this rule:

.ribbon {    
    background: url("/_cassette/file/Public/images/blue-rib_81ab1e7f2fdb27c91a9e9b41eed420390e21f7e0.png") no-repeat;
}

And the image displays fine.

In this particular case, using the same idea, the background rule is not rewritten by cassette and the users receives the regular rule I manually entered in the .less file.

Here are the facts:

• The working and non-working rules are both in the same .less file.
• The image is correctly in my Visual Studio project, in a folder /Public/images.
• Using the Google Chrome web tool, I can see the rule is background: url("/Public/image/blue-rib.png") no-repeat; - Not rewritten as it should be by Cassette.

Any ideas on what might the cause of this?

I tried changing to debug=false in web.config, running the app and nothing works.

Tried switching back to debug=true and still no dice.

Any suggestions?

Answer 1

Do the images exist on disk? Cassette skips images it can't find.

Also, does switching to CSS relative URLs work?