Laravel Mix 6.0.x - Combine compiled files

Hi there,

after two years of absence I started a new Laravel project. In the past I used Sass for compiling Bootstrap and Stylus for everything else. (Please no judgment ... it works for me ;-) ).

In the past I saved the compiled files in the resources folder and combined them. Unfortunately this is no longer possible in the actual version of mix. When I try to leave the pubic folder using "../ressources/path/to/combile/dir" the files are generated beneath the public folder starting with "Users/...". I didn't found any workaround.

So I configured my webpack.mix.js in this way:

mix.sass('resources/sass/bootstrap.scss', '/css/scss.css')

	.stylus('resources/stylus/app.styl', '/css/stylus.css')

	.combine([

	    	'public/css/scss.css',
    		'public/css/stylus.css',

	], 'public/css/all.css')
		.then(() => {
			del('public/css/scss.css');
			del('public/css/stylus.css');
		}
);

But the combine (or styles) command only works when the files to combine exits before Mix starts. If the files are generated within the running command "all.css" remains empty.

None the less, when the files are present in the file system the command combines the fresh complied content into "all.css". Even if the source files are empty.

But I don't want the individual scss.css and stylus.css in my public folder because they are useless after the combination.

Any ideas how I get this working?

Thanks :)

tobiasopitz

5 years ago

Best Answer

Level 6

I figured out a workaround. It's not elegant and so kind of annoying, but it's working. I'm "touching" the files before Mix starts. So the files are present and Mix is only filling them. In this case the combination works properly.

const mix = require('laravel-mix');
const del = require('del');
const fs = require('fs');

// === Styles ===

// Touching CSS files so they exists in the filesystem before mix starts. Otherwise the combined CSS file would stay empty.
fs.writeFile('public/css/scss.css', '', function (err) { if (err) throw err; });
fs.writeFile('public/css/stylus.css', '', function (err) { if (err) throw err; });

mix.sass('resources/sass/bootstrap.scss', '/css/scss.css')

	.stylus('resources/stylus/app.styl', '/css/stylus.css')

	.combine([

    	'public/css/scss.css',
    	'public/css/stylus.css',

	], 'public/css/all.css')
		.then(() => {
				del('public/css/scss.css');
				del('public/css/stylus.css');
		}
);

Maybe there will be a build in solution for temporary files in the future. :)

Please or to participate in this conversation.