5

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?

Improve this question

4 Answers 4

Reset to default
3

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¹.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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');
Improve this answer

5 Comments

I'm quite aware of how the npm scripts work. So I don't think you read my question fully. I want to keep the un-minified .css-file and generate a minified .min.css-file aswell. Not just the one, minified file when I run npm run production. I have edited the question to make it more clear what I want to do. Sorry for the confusion.
Okay, I got confused. Now my answer may help.
No problem, and thanks. However, copy() throws an error saying the file or directory doesn't exist, even if I seperate the two like you suggested. I have even tried with absolute paths, but alas. So I have made an issue on GitHub.
Okay, forgive me. What if you erase copy? That's why I put two mix actions.
Then Laravel Mix whines about duplicates :) Trust me, running two mix.sass was the very first thing I tried as it would be the easiest solution.
0

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.

Improve this answer

Comments

0

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');
}
Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.