Laravel 5.4 upgrade from Elixir to Webpack breaks js compilation with multiple SASS files

Question

With Laravel 5.2's Elixir I used to be able to compile multiple SASS files into a single CSS file like so:

mix.sass([
        'app.scss',
        'controllers.scss'
    ], 'public/assets/css')

This no longer works. I now get this error:

mix.sass() is missing required parameter 1: src

Examining the new version of the function, it indeed wants a string and no longer knows what to do with an array.

I consulted the Laravel 5.4 docs on Webpack and the section about compiling multiple SASS files into a single CSS file has been removed, so I am presuming this functionality is now gone. What is the best way to compile multiple SASS files into a single CSS file using Webpack?

Answer 1

You should use css's @import statement in a master .scss file, and then just tell webpack about that one file.

For example, if I have the scss files style.scss and controllers.scss, I might have the following app.scss file:

// App Styles
@import "style";

// Controller Styles
@import "controllers";

Then I will bundle that with webpack, with the following in webpack.mix.js:

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .sourceMaps();

(Sourcemaps are optional, but they're very useful for debugging, as they enable developer consoles to tell you what line of code in your source files is causing a particular css rule. Without it, the dev console will tell you a line from app.css, and you'll be left guessing about where the original code actually is.)