26 марта, в 20:49

Добавление атрибута media в CSS link в Laravel Vite

Директива @vite имеет два параметра. Первый – путь до файлов. Второй, опциональный – путь до папки со скомпилированными ресурсами. Поэтому, чтобы кастомизировать получающийся html нам нужно использовать класс, который обрабатывает эту директиву, напрямую.

Директива @vite обрабатывается классом Illuminate\Foundation\Vite

@vite('resources/css/styles-768.scss')

Будет выглядеть как

<?php

use Illuminate\Foundation\Vite;

?>
...
{{ (new Vite())->withEntryPoints('resources/css/styles-768.scss') }}

Теперь, чтобы добавить media query используем метод useStyleTagAttributes.

Финальный код:

<?php

use Illuminate\Foundation\Vite;

?>
...
{{ 
    (new Vite())
        ->withEntryPoints('resources/css/styles-768.scss')
        ->useStyleTagAttributes(['media' => '(min-width: 768px)'])
}}

О других возможностях этого класса можно узнать в официальной документации или просто почитать код в файле vendor/laravel/framework/src/Illuminate/Foundation/Vite.php.