F
Filament•13mo ago
Vladyslav

ax-load-css does not work

My registration 
 // Asset Registration
FilamentAsset::register(
    [
        AlpineComponent::make('menu-builder-alpine', __DIR__ . '/../Resources/dist/menu.js')->loadedOnRequest(),
        Css::make('menu-builder-css', __DIR__ . '/../Resources/dist/menu.css')->loadedOnRequest(),
    ],
    'modules/menu-builder'
);
 // Asset Registration
FilamentAsset::register(
    [
        AlpineComponent::make('menu-builder-alpine', __DIR__ . '/../Resources/dist/menu.js')->loadedOnRequest(),
        Css::make('menu-builder-css', __DIR__ . '/../Resources/dist/menu.css')->loadedOnRequest(),
    ],
    'modules/menu-builder'
);
How i use it 
ax-load
            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('menu-builder-alpine', 'modules/menu-builder') }}"
            ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder') }}"
            
ax-load
            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('menu-builder-alpine', 'modules/menu-builder') }}"
            ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder') }}"
JS loads successfully, but CSS doesn't want to load. If I just remove loadedOnRequest() from registration, then CSS loads properly. However, I want to use lazy loading. What am I doing wrong? For JS, it loads properly.
Solution:
okay, i dont understand what going on, but this help me: 
ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder') }}"
ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder') }}"
...
Jump to solution
1 Reply
Solution
Vladyslav
Vladyslav•13mo ago
okay, i dont understand what going on, but this help me: 
ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder') }}"
ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder') }}"
change to 
x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder'))]"
x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder'))]"
All code 
ax-load
ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('menu-builder-alpine', 'modules/menu-builder') }}"
x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder'))]"
ax-load
ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('menu-builder-alpine', 'modules/menu-builder') }}"
x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('menu-builder-css', 'modules/menu-builder'))]"
It seems strange

Did you find this page helpful?