Defining multiple SASS files do not result in multiple CSS files and output param gets ignored

[Fjonan]

• Laravel Mix Version: 6.0.49 ├── @popperjs/core@2.11.8 ├── ajv@6.12.6 ├── axios@0.21.4 ├── bootstrap@5.3.0 ├── cross-env@5.2.1 ├── css-loader@5.2.7 ├── fabric@4.6.0 ├── imagemin@6.1.0 ├── jquery@3.7.0 ├── laravel-mix@6.0.49 ├── lodash@4.17.21 ├── node-sass@9.0.0 ├── postcss@8.4.24 ├── resolve-url-loader@2.3.2 ├── sass-loader@13.3.1 ├── v-calendar@2.4.1 ├── vue-loader@15.10.1 ├── vue-template-compiler@2.7.14 ├── vue@2.7.14 └── webpack@5.85.0
• Node Version: 18.16.0
• NPM Version: 7.4.2
• OS: Windows 11

Description:

Defining multiple SASS files do not result in multiple CSS files (as described in the documentation). All given SASS files are combined into one and they use the path and filename of the first JS file given. If no JS file has been used, a fallback name mix.css is used in the default folder.

Looks to me like the .sass() output parameter is never used and instead the first value from the .js() output parameter instead.

Steps To Reproduce:

// webpack.mix.js
let mix = require('laravel-mix');

mix.setPublicPath('public');

mix .sass('resources/assets/sass/default.scss', 'css')
    .sass('resources/assets/sass/themes/flt.scss', 'css')
    .sass('resources/assets/sass/codecheck.scss', 'css')

    .js('resources/assets/js/app.js', 'js')
    .js('resources/assets/js/changepassword.js', 'js')

    .vue()

    .options(
        {
            processCssUrls: false
        }
    )
;

And this is the output

when I comment out or change the order of the JS files, this happens:

// webpack.mix.js
let mix = require('laravel-mix');

mix.setPublicPath('public');

mix .sass('resources/assets/sass/default.scss', 'css')
    .sass('resources/assets/sass/themes/flt.scss', 'css')
    .sass('resources/assets/sass/codecheck.scss', 'css')

//    .js('resources/assets/js/app.js', 'js')
    .js('resources/assets/js/changepassword.js', 'js')

    .vue()

    .options(
        {
            processCssUrls: false
        }
    )
;

Output

Third try, I remove the remaining JS file like this:

// webpack.mix.js
let mix = require('laravel-mix');

mix.setPublicPath('public');

mix .sass('resources/assets/sass/default.scss', 'css')
    .sass('resources/assets/sass/themes/flt.scss', 'css')
    .sass('resources/assets/sass/codecheck.scss', 'css')

    //.js('resources/assets/js/app.js', 'js')
    //.js('resources/assets/js/changepassword.js', 'js')

    .vue()

    .options(
        {
            processCssUrls: false
        }
    )
;

Output:

[Fjonan]

No ideas on why that is?