michtio / laravel-mix-criticalcss

mix.criticalcss()
35 stars 13 forks source link

No critical css output #16

Open vpmv opened 2 years ago

vpmv commented 2 years ago

I'm not sure I fully understand the documentation, because for some reason the script is not outputting any css. I'm running the config in a separate process, as this is a docker container, which can't lookup itself until fully compiled.

I'm actually using https://github.com/ampedweb/laravel-mix-criticalcss, since that one at least doesn't crash. Perhaps @ampedweb can be of service?

let mix = require('laravel-mix');
require('laravel-mix-criticalcss');

mix
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .criticalCss({
        enabled: true,
        paths: {
            base: 'http://127.0.0.1',
            templates: 'public/css/',
            suffix: '.critical.min'
        },
        urls: [
            { url: '/', template: 'home' }
//             more ...
        ],
        options: {
            height: 800
        }
     })
;

So it ends up generating a few empty css files. Not sure how to move on.

ampedweb commented 2 years ago

Hi @netitus . I think it might possibly be timing out? Also try specifying a width.

Here's an example config from one of my projects:

.criticalCss({
    enabled: mix.inProduction(),
    paths: {
        base: "http://devurl.docker/",
        templates: './css/critical/',
        suffix: '_critical.min'
    },
    urls: [
        {url: '', template: 'homepage'},
        {url: 'other-page', template: 'other_page'},
    ],
    options: {
        width: 411,
        height: 823,
        penthouse: {
            timeout: 1200000,
            //pageLoadSkipTimeout:100000,
            // screenshots: {
            //     basePath: 'homepage', // absolute or relative; excluding file extension
            //     type: 'jpeg', // jpeg or png, png default
            //     quality: 30 // only applies for jpeg type
            // }
            //allowedResponseCode:200
        }
        //timeout: 1200000,
        //minify: true,
    },
})
vpmv commented 2 years ago

Thanks for your reply, @ampedweb . I'm afraid that doesn't help. I've set width and height and penthouse.timeout. To further check things, I reviewed and added the screenshot config as well, but that doesn't seem to do anything. It doesn't create any images. Maybe I'm missing some prerequisites?