Laravel Mix: compile Sass into .css and min.css

Question

I've run my head against the wall here.

For my project, I would like Laravel Mix/webpack to compile an .scss-file into two files, a regular, un-minified (expanded or nested) .css-file, and a minified (compressed) .min.css-file, so I essentially have both files.

I've tried with:

mix.sass('src', 'output')
   .copy('output.css', 'output.min.css')
   .minify('output.min.css');

However, this results in an error because the .css-file wasn't compiled.

I know Laravel Mix minifies when running npm run production but I'm interested in two files, not just the one production compiles to.

Is there any way to do this, without modifying the whole webpack config?

Answer 1

I found an answer by messing with a few things, and came to the conclusion that I'm not going to use Laravel Mix's production-script for this. I couldn't find a way for Laravel Mix not to minify the regular CSS when running npm run production, however, production was needed for minify() to work, as it doesn't minify if the environment is development.

So I pulled in a package that minify on command. This is where minifier() comes to the rescue.

npm install --save-dev minifier

Then my webpack.mix.js looks like this:

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

mix.sass('src/sass/app.scss', 'public/css/', {
    outputStyle: 'nested'
});

mix.then(() => {
    minifier.minify('public/css/app.css')
});

The mix.then() is triggered when webpack finishes building, and .minify() will automagically create a new file called app.min.css.

Then when I run npm run dev, my Sass will be compiled in nested format, and it will also be minified. Not the most elegant solution but this is the best I could come up with.

And hey, if it's stupid but it works, it's not stupid. I mean, a CPU is literally a rock that we tricked into thinking¹.

Answer 2

Laravel Mix/Webpack has some prebuild scripts in package.json file. Keep it like:

mix.sass('resources/assets/sass/app.scss', 'public/css');

and when you want to minify css do npm run production in console, otherwise npm run development.

EDIT: If you want to do both streams sassed and minified do it separately:

mix.sass('src', 'output');
mix
.sass('src', 'output')
.minify('output.min.css');

Answer 3

Can you try this-

mix.js('resources/assets/js/bootstrap.js', 'public/js')
    .sass('resources/assets/sass/bootstrap.scss', 'public/css');

But shortly check the name bootstrap.scss in file.

Answer 4

Old question but i think this might help:

/**
 * Tested over Laravel Mix V6 
 */
//If your in development, normally you compile the original css. You can run (npx mix watch) command then start your edits
if(!mix.inProduction()) {
    mix.js( 'src/app.js', 'dist/' )
    .sass('src/output.scss', 'assets/css/output.css');
}

//Then this will run only on production, which will minify the output
if(mix.inProduction()) {
    mix.js( 'src/app.js', 'dist/' )
    .sass('src/output.scss', 'assets/css/output.min.css');
}