Как скомпилить несколько .sass файлов с mix.sass()?

Есть такая структура папки ./src/scss/:

--> scss
----> root.scss
----> header.scss
----> body.scss
----> footer.scss

т.е. в папке scss лежат 4 .scss файла. И я пытаюсь сделать из них бандл app.css, но не получается.

Соответственно в webpack.mix.js пробовал сделать так:

mix.sass(
    [
        './src/scss/root.scss',
        './src/scss/header.scss',
        './src/scss/body.scss',
        './src/scss/footer.scss'
    ], './dist/app.css'
)

но получаю ошибку

AssertionError [ERR_ASSERTION]: mix.sass() is missing required parameter 1: src


И так тоже делал:

mix.sass('./src/scss/root.scss', './dist/app.css')
   .sass('./src/scss/header.scss', './dist/app.css')
   .sass('./src/scss/body.scss', './dist/app.css')
   .sass('./src/scss/footer.scss', './dist/app.css');

Но так он записывает в app.css только из footer.scss ¯\_(ツ)_/¯


Как правильно сделать бандл из .sass файлов в laravel-mix?

Ответы (1 шт):

Автор решения: DiD

Объединять sass в один можно с помощью правила @import или правила @use.

Для начала надо создать общий файл .scss, в который подключаются все модули. Именно этот файл и надо конвертировать в .css.

→ Ссылка