Search code examples
cssminifylaravel-mix

How does minification of css files using laravel mix work?

Why does minified file equal to a non-minified?

const { mix } = require('laravel-mix');

mix.styles([
    'public/some.css',
    'public/thing.css',
], 'public/css/index.css');

mix.minify('public/css/index.css');

When running npm run production, sizes are 128kB (both compressed)

   Asset       Size  Chunks             Chunk Names
               mix.js  511 bytes       0  [emitted]  mix
       /css/index.css     128 kB          [emitted]
   /css/index.min.css     128 kB          [emitted]

When running npm run dev, both files are of the same size and it is 160 kB, i.e. both are non-minified. How come a minified version is dependent not upon a min suffix, but on a dev\prod option?

Solution

  • As from this laravel-mix issue Jeffrey points out that minification only happens in production mode. So to minify your css files, you can have:

    mix.styles([ 'public/some.css', 'public/thing.css', ], 'public/css/index.css')

    Then running the following will concatenate and minify your files.

    $ npm run production

    Works for (laravel-mix@1.0)