Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md updated readme Jan 15, 2019
index.js added dependencies Mar 29, 2018



Laravel Mix Critical

This extension provides instant Critical support to your Mix (v2.1 and up) builds.


First, install the extension.

npm install laravel-mix-criticalcss --save-dev

Then, require it within your webpack.mix.js file, like so:

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


    .js('resources/assets/js/app.js', 'public/js')
    .less('resources/assets/less/app.less', 'public/css')
        enabled: mix.inProduction(),
        paths: {
            base: 'https://url-of-where-criticalcss-is-extracted.com/',
            templates: './where-critical-css-file-needs-to-be-written/'
        urls: [
            { url: 'blog', template: 'blog' },
        options: {
            minify: true,

And you're done! Compile everything down with npm run prod. npm run dev will not generate any critical css! Also make sure that your paths are correct and point to valid urls / segments of your website, whenever criticalcss has issues detecting the url, it might throw a console error!


Only urls is required - all other options are optional. If you don't want to use the paths object you can simply define your base and templates in the url and template options from urls

Name Type Default Description
enabled boolean mix.inProduction() If generating Critical CSS should be enabled
paths object {} Takes 2 arguments base ( src-url ) and templates ( folder where critical css files should be written )
urls array [] An array of url objects, each with a src and dest: { src: 'http://example.com', dest: 'index_critical.min.css' }
options object {} An object of Critical options