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

Trying to create MVP/POC for this stack, but it just doesn't work. I'm not that experienced with Laravel. If anyone has a link to a repo with a stack like this that works, it'd be much appreciated.

What I have:

Laravel 10 + Vite + Sass project that already has a lot of preexisting code in it

What I need:

Add AdminLTE and have the capability to edit its HTML/CSS seamlessly and (in case of CSS) non-destructively so I can later easily update the package whenever needed

Issues I run into:

・Npm run dev stops working on Vite (command not found error), once I publish AdminLTE Laravel views to customize them as per official documentation

・Adding CSS via @ section('css') and specifying the path only works for public/ folder, and I want a Sass-compiled style override out of resources/ folder

・My web.php routes seem to have become scrambled and I think it has to do with package-default admin routing, but not sure what's the go-to way to override it

It also seems like AdminLTE recommended Laravel package is not compatible with Vite? People seem to mention that having Larastarters preinsalled resolves this issue, but Larastarters runs on Tailwind/Bootstrap, and I need Sass in this case, so no dice? Is that correct?

I think one last thing I can do is just manually move all the AdminLTE styles and Blade files into my resources/ folder and carefully compile/connect everything, while creating my own web.php roues, but that would be one of the most ridiculous UI package installation processes I've ever had to go through.

I'm stuck and broken. Any help would be much appreciated.

Not sure if I should ask this as a separate question, but should I just give up (for now I simply can't) and go with Tailwind/DaisyUI for everything, including Admin Dashboard?

LaryAI

3 years ago

Level 58

Unfortunately, there is no one-size-fits-all solution to this problem, as it involves a number of different issues and dependencies. However, here are a few suggestions that may help:

Try using a different package for integrating AdminLTE with Laravel, such as "jeroennoten/laravel-adminlte". This package has been updated more recently and may be more compatible with Vite.
If you're having trouble with the "npm run dev" command, try running "npm install" again to make sure all dependencies are up to date. You may also need to install the "vite" package globally using "npm install -g vite".
To add Sass-compiled styles to your project, you can create a new Sass file in the "resources/sass" directory and import it into your main Sass file using "@import". You can then compile the Sass using the "npm run dev" command.
If you're having trouble with your routes, try commenting out any routes that are causing issues and gradually adding them back in to see where the problem lies. You may also need to adjust the default routes provided by the AdminLTE package to fit your project's needs.
If all else fails, you may need to manually move the AdminLTE files into your project and compile/connect everything yourself. This can be a time-consuming process, but it may be necessary if you're having compatibility issues with other packages.

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

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
});

Pawooo

3 years ago

Level 5

@LaryAI

Try using a different package for integrating AdminLTE with Laravel, such as "jeroennoten/laravel-adminlte". This package has been updated more recently and may be more compatible with Vite.

Will try some of the steps mentioned here, however, I'm already using the same package after a lo of trial-and-error, and the Github Issue that it's not compatible with Vite is hanging there since Dec 2022

Pawooo

3 years ago

Level 5

@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:

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:

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

Please or to participate in this conversation.