Laravel 5.4 Webpack Mix - merge SCSS and CSS

Question

Is there any way to merge SCSS and CSS?

Currently I do it as follows but it doesn't work. The code below supposed to compile scss into a temp directory and then merge it with the plain css.

mix.sass('resources/assets/sass/app.scss', '../resources/assets/tmp_compilation_files/scss-assets.css').styles([ 'resources/assets/tmp_compilation_files/scss-assets.css', 'node_modules/isteven-angular-multiselect/isteven-multi-select.css' ], 'public/css/app.css');

but nothing. The compiled SASS is missing in the public/css/app.css file. This is so annoying, such a simple task and it's not doable. I was able to do it with elixir - compiling scss into a tmp directory (./resources/tmp) and then merging it with the css files using styles().

I also haven't found any info in the documentation about the path params - where I specify absolute paths, where relative to the public directory?

Answer 1

There are multiple ways of accomplishing it. My approach has been to, (given your file names), replace:

mix.sass('resources/assets/sass/app.scss', '../resources/assets/tmp_compilation_files/scss-assets.css').styles([ 'resources/assets/tmp_compilation_files/scss-assets.css', 'node_modules/isteven-angular-multiselect/isteven-multi-select.css' ], 'public/css/app.css');

with:

mix.copy('resources/assets/tmp_compilation_files/scss-assets.css', 'resources/assets/sass/_scss-assets.scss');
mix.copy('node_modules/isteven-angular-multiselect/isteven-multi-select.css', 'resources/assets/sass/_isteven-multi-select.scss');
mix.sass('resources/assets/sass/app.scss', 'public/css');

Then add the following lines into app.scss:

@import "scss-assets";
@import "isteven-multi-select";

And that's it. When you next compile your assets, (i.e. - through npm run dev), it should have all compiled.