Extension, Plugin

Archived
Forum
(read-only)

Minimee

ExpressionEngine 2

Back to this add-on's main page
View Other Add-ons From John D. Wells

     

CSS not loading on certain pages…

Bug Report

ccdavies
ccdavies

Hi.

I love your plugin so much I have started to add to all of my sites. Everything was going smoothly, but I have hit an issue.

On a site I am using LESS on (less js - still in development phase), all pages work fine, but 2. On two pages the CSS isn’t rendered.

I tried compiling the LESS thinking it might of been a less issue, but it still doesn’t work on those two pages.

If I disable Minimee it works.

In the debugging mode Minimee doesn’t show any errors….

Any ideas?

John D Wells
# 1
Developer
John D Wells

Hi ccdavies,

Thanks for digging Minimee! :)

I don’t know if Minimee will play nice with LESS.js - LESS.js is run in the browser, after Minimee has already compressed & minified the CSS.  I’m not 100% sure how LESS.js runs, but Minimee writes the cache filenames with a *.css extension, so it might mean that LESS.js is passing over this file and not processing it.

While I have built a beta version of a Minimee+LESS extension, it has some significant drawbacks and I do not recommend using it.  I would look into something like Codekit to process your less files for you.

But let’s see what your setup is and be sure there isn’t anything else wrong: Could you copy-and-paste the part of your EE template that contains the Minimee tags?

Cheers,
John

ccdavies
# 2
ccdavies

Hi John.

The thing is, I compiled the LESS to CSS and issue still occurred…

Here is my code with Minimee tags:

{exp:minimee:css}
     
<link rel="stylesheet/less" type="text/css" href="/-/css/cross-browser.less">
     <
link rel="stylesheet" type="text/css" href="/-/css/fancybox.css">
 
{/exp:minimee:css}

 {exp
:minimee:js}
  [removed][removed]
 {
/exp:minimee:js}
 
 [removed]
    head
.js("https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js")
        .
js("https://code.jquery.com/ui/1.9.0/jquery-ui.js")
        .
js("{exp:minimee js='/-/js/less.js'}")
        .
js("{exp:minimee js='/-/js/form.js'}")
        .
js("{exp:minimee js='/-/js/timing.js'}")
        .
js("{exp:minimee js='/-/js/retina.js'}")
        .
js("{exp:minimee js='/-/js/fancybox.js'}")
        .
js("{exp:minimee js='/-/js/scripts.js'}");
    
[removed] 

John D Wells
# 3
Developer
John D Wells

Hi ccdavies,

Are you saying that you locally compiled the LESS to CSS (i.e. using a desktop compiler such as Codekit), had Minimee minify & combine that CSS file, and none of the styles showed in your browser?  Could it be a problem with how you’ve configured Minimee, do you configure via the Extension or bootstrap?

The code example you gave will definitely not work - as I said, Minimee is going to process your files prior to being sent to the browser, at which point LESS.js will have nothing to run.

Cheers,
John

ccdavies
# 4
ccdavies

Hi John. Permission to slap me! I just tried again (realising I was likely taking up your precious time) and it worked… I swear I must have tried it 10 times… :)

Strange you say it wouldn’t work with LESS, as somehow (god knows) its working on 3 development sites I am running right now… Magic?

John D Wells
# 5
Developer
John D Wells

LOL… well I suppose I don’t know exactly how LESS.js works, so cool!  Glad it is working now, but let me know if it happens again and I’ll try to help.

Cheers,
John