I'm stuck part 2. How to make AdminLTE work on Laravel 10 + Vite + Sass

I have done what @LarryAI suggested and ran into some new issues. Unfortunately, Larry seems to be only prompted once per post, so I have to create a second one seeing not that many volunteers out there at this hour :)

@LaryAI Okay AI Overlord here's to hoping you can answer me again since Bing etc. are trained on a superold data and deny the existence of Laravel 10.

Question 1:

And here's an example of how to override the default routes provided by the AdminLTE package:

// routes/web.php

Route::group(['prefix' => 'admin'], function () {
    // Your custom routes here
});

The route middleware (::group?) you specify is not listed in Laravel documentation, am I supposed to replace ::group with something else?

I assumed it's supposed to be some kind of prepending mechanism, so I tried writing something like this:

Route::group(['prefix' => 'admin'], function () {
    Route::get('/login', function () {
        return view('/auth/login');
    });    
});

And I get 404, a single route like

Route::get('/admin/login', function () {
    return view('/auth/login');
});

Works just fine. But I'd like to have my routes more organized if I can use he schema you specified properly.

Question 2:

Here's an example of how to import a Sass file into your main Sass file:

// resources/sass/app.scss

@import 'adminlte';

// resources/sass/adminlte.scss

// Your custom AdminLTE styles here

I have done as you instructed, however, the crucial part of connecting the AdminLTE blade and making my CSS override everything in terms of AdminLTE specificity is not there.

The way it is setup right now looks like this: BLADE

//resources/views/auth/login.blade.php
@section('css')
	//Load the whole css where it all gets compiled
    <link rel="stylesheet" href="{{asset('/css/app.scss')}}">
@stop

<form action="{{ $login_url }}" method="post" class="lte-form">

CSS

//resources/css/admin-lte/_dashboard-custom.scss
.lte-form {
    background-color: black;
}

//resources/css/admin-lte/_index.scss
@forward 'dashboard-custom';

//resources/css/app.scss
@use 'admin-lte';

Not gonna lie, at this point I'd really wish I could just put all LTE code into a separate @layer and have my styles above it, but hey that's not how people use Sass afaik, so I have to waste my time doing this

LaryAI

3 years ago

Level 58

For Question 1, the ::group syntax is just a shorthand for Route::middleware(['middlewareName']). So, you can replace ::group with middleware like this:

Route::middleware(['middlewareName'])->group(function () {
    // Your custom routes here
});

For Question 2, you need to import the adminlte.scss file in your app.scss file like this:

// resources/sass/app.scss

@import 'adminlte';

// Your custom styles here

Then, in your blade file, you can remove the css section and just link to the compiled app.css file like this:

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Finally, to override the AdminLTE styles, you can add your custom styles in a separate file and import it after the adminlte.scss file like this:

// resources/sass/app.scss

@import 'adminlte';
@import 'custom';

// Your custom styles here

// resources/sass/custom.scss

.lte-form {
    background-color: black;
}

Please or to participate in this conversation.