Настройте Laravel Mix с критическим разделением CSS на SASS и PostCSS
Я хочу настроить Laravel Mix с mix.sass И PostCss Критическое разбиение CSS. В конце я хочу два файла: app.css и app-crit.css.
К сожалению, я могу заставить это работать. Одна из настроек (webpack.mix.js), которую я попробовал:
микшировать.js('templates/src/js/app.js', 'web/assets/dist/')
.js('templates/src/js/home.js', 'web/assets/dist/')
.extract(['vue','axios','lazysizes','svgxuse', 'fontfaceobserver'], 'web/assets/dist/vendor.js')
.sass('templates/src/scss/app.scss', 'web/assets/dist/')
.sourceMaps()
.опции({
postCss: [
требует ('postcss критичного-CSS')({
сохранить: ложь,
минимизировать: ложь
})
]
})
.browserSync({
прокси: "127.0.0.1:8080",
файлы: [
'Шаблоны /**/*. Веточка',
'Шаблоны / SRC / JS /**/*',
'Шаблоны / SRC / СКС / ** / *'
]
});
if (mix.inProduction ()) {
console.log ("В производстве");
mix.version();
}
Когда я запускаю скрипт через 'npm run watch', я получаю сообщение об ошибке:
10% сборка модулей 0/1 модули 1 активны...ign-tools/templates/src/scss/app.scssWithout `from` опция PostCSS может сгенерировать неправильную исходную карту и не найдет конфигурацию Browserslist. Установите это в путь к файлу CSS или в "undefined", чтобы предотвратить это предупреждение.
Кроме того, мой файл просто копирует все важные стили. Файл становится все больше и больше, расширяя дублирующийся код каждый раз, когда изменяется входной SCSS/CSS-файл.
Я попытался настроить Laravel Mix + mix.sass + один из следующих плагинов:
Безуспешно:(Кто-нибудь с рабочей настройкой или ссылкой на пример репозитория?
Спасибо, теун