Блог

Главная - Вопросы по программированию - Компиляция нескольких CSS в ОДИН CSS с помощью Laravel MIX

Компиляция нескольких CSS в ОДИН CSS с помощью Laravel MIX

#laravel #laravel-mix

#laravel #laravel-mix

Вопрос:

Мой текущий webpack.mix.js конфигурация такова:

 mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
]).extract();

Если у меня есть другой CSS, скажем, «plugin-1.css», как я могу объединить оба, чтобы получить результат одного app.css?

Я пробовал [‘resources/css/app.css’, ‘plugin-1.css’], но это не вариант.

Ответ №1:

Решение состояло в том, чтобы импортировать все необходимые css в один основной файл css, а затем использовать его внутри цепочки микширования:

app.css:

 @import 'resources/css/plugin-1.css';
@import 'resources/css/plugin-2.css';

[the content...]

Ответ №2:

Я обычно использую так

 mix.styles([
'resources/css/plugin-1.css',
'resources/css/plugin-2.css'
], 'public/assets/css/app.css');

Ответ №3:

Вы объединяете их в цепочку

 mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
]).postCss('resources/css/plugin-1.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
]).extract();

Комментарии:

1. в итоге получится 2 выходных файла: app.css И plugin-1.css Мне нужно, чтобы они были объединены в один файл. Я попытался принудительно присвоить имени выходного файла значение ‘public /css / app.css’ для обоих, но если я это сделаю, в итоге я получу один файл, НО только из плагина-1.css (перезапись произойдет, а не добавление)