laravel-mix-criticalcss
laravel-mix-criticalcss copied to clipboard
No critical css output
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.
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,
},
})
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?