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') }}"

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

Jump to solution

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') }}"

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') }}"

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

Jump to solution

ax-load-css does not work

ax-load-css does not work

Similar Threads

Similar Threads

Similar Threads