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

user_5222116 0
Viewed 8175

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?

laravel-mix webpack sass
4 Answers

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.

user_31784850

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');
}
user_73401060
Related