Laravel-mix: Compiling SASS and Plain CSS into a single CSS file

[FilipQL]

Hi,

On Vuecasts I watched the video that introduces Laravel Mix. I am wondering if there is going to be any new feature that will more elegantly solve the problem of compiling SASS and plain CSS into a single CSS file: https://laracasts.com/discuss/channels/elixir/compiling-sass-and-plain-css-into-a-single-css-file?

[JeffreyWay]

Can your Sass entry point not just import the CSS file?

[FilipQL]

@JeffreyWay Importing the CSS file in Sass entry point didn't work... at least it didn't work with some "pure" CSS libraries (such as Animate.css) installed via npm... As ejdelmonico suggested on Laracasts forum - we need to change the css extension to scss, import it and use mix.sass.
Changing the css extension to scss isn't hard but I was wondering whether there will be a more elegant solution in the future.

[OwenMelbz]

Might not be a global .css fix.

However for animate.css we're loading it fine via app.scss defining only the animations we want

@import 'node_modules/animate.css/source/base';
@import 'node_modules/animate.css/source/sliding_entrances/slideInDown';
@import 'node_modules/animate.css/source/sliding_exits/slideOutUp';

[FilipQL]

@OwenMelbz Cool 👍

[romanzpolski]

after installing animate.css with npm,
in /resources/assets/sass/app.scss place this:

@import 'node_modules/animate.css/animate';

Then run laravel-mix, works fine for me. Laravel 5.4

[bradley-varol]

I'd like this feature. The following doesn't compile with mix:

mix.sass([
    'node_modules/package_name/css/package_name.css',
    // ...
], 'public/css/app.css');