Как указать папку для изображений из sass в Laravel mix?

Question

[Евгений]

Подскажите такой момент.
Что бы изображения и шрифты при компиляции SASS, падали в нужную мне папку я указываю директивы

mix.config.fileLoaderDirs.images = '/myFolder1/images';
mix.config.fileLoaderDirs.fonts ='/myFolder1/fonts';

Но дело в том что у меня компилируются несколько пакетов SASS для клиентской и админский части. Как разделить это?
Т.е. что бы данная директива, применялась только к нужной мне задачи.

Пробовал переназначить, путем указания непосредственно перед задачей, но не получается

mix.config.fileLoaderDirs.images = '/myFolder1/images';
mix.config.fileLoaderDirs.fonts ='/myFolder1/fonts';
mix.sass('resources/app1.scss', '/myFolder1/app.css');

// Переназначаю папки хранения images и fonts
mix.config.fileLoaderDirs.images = '/myFolder2/images';
mix.config.fileLoaderDirs.fonts ='/myFolder2/fonts';
mix.sass('resources/app2.scss', '/myFolder2/app.css');

Но нет. Директива указывается видать только один раз и соответственно просто перезаписываются последним значением.

Comments

[Сергей delphinpro]

Директива указывается видать только один раз

Этот конфиг - декларативный. Он задает значения, а выполняется потом, когда все сконфигурировано. Само собой, одни и те же значения будут перезаписаны.

Answer 1

[Сергей delphinpro]

Зачем же по сути два проекта пихать в один конфиг? Напишите разные, и запускайте по отдельности.
Я сейчас не помню, можно ли в package.json указывать разные .mix.js файлы. Но точно можно внутри этого файла писать условные конструкции. Это же просто js файл. Вот и ориентируйтесь на переменные окружения, которые задавайте в строке запуска команд..

Comments

[Евгений]

Во вот это по сути мне и надо. Я просто не знал что можно разделить конфиги.
Осталось разобраться как.
Спасибо

[Сергей delphinpro]

Евгений, в package.json скопируйте один из скриптов

scripts: {
  "build:site":"cross-env BUNDLE=site ...."
  "build:admin":"cross-env BUNDLE=admin ...."
}

в миксе проверяйте эти значения

if (process.env.BUNDLE === 'site') {
  // конфиг для сайта
}
if (process.env.BUNDLE === 'admin') {
  // конфиг для админки
}
// общий конфиг

Запускайте нужную команду

npm run build:site
npm run build:admin

При необходимости также разделите команды запуска сервера разработки.

[Евгений]

Сергей delphinpro, Спасибо большое, помогло и решило задачу

Answer 2

[feycot]

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copyDirectory('resources/assets/img', 'public/img');

Вот таким образом mix работает в https://github.com/fey/hexlet-sicp/blob/master/web... этом проекте
Т.е. если вам нужно скопировать разные файлы из разных директорий, то можете попробовать этот способ.

Comments

[Евгений]

Немного не пойму в чем отличие от моего написания? Результат один и тот же

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copyDirectory('resources/assets/img', 'public/img');

mix.js('resources/js/app.js', 'public/js');
mix.sass('resources/sass/app.scss', 'public/css');
mix.copyDirectory('resources/assets/img', 'public/img');

В том то и дело, что мне не нужно копировать папки с изображением.
Я указываю патч для кончика, что бы он при компиляции SASS/SCSS сам положил туда картинки и шрифты.
И это работает, но только на весь проект, а не на конкретную задачу.

[feycot]

Евгений, я не очень понял.
Вам нужно раздельно собирать файлы, либо для клиента, либо для админки?
Или и то и другое сразу?

[Евгений]

Возможно некорректно написал.
Я собираю все в одном проекте в одном webpack.mix.js

Там присутствуют один SASS, при компиляции изображения которых нужно положить в одну папку,
И так же другой SASS, при компиляции изображения которых нужно положить в другу папку,

Сейчас всё при компиляции валится в одну папку

[feycot]

Ниже Сергей delphinpro подсказал решение с разделением конфигов.
Если у вас два разных sass файла, то не должно быть проблем с тем, куда их можно скомпилировать.
Просто для каждого файла выполняете свой .sass метод