My app.css file is empty laravel 10 #49085

gurds91 · 2023-11-22T13:06:38Z

gurds91
Nov 22, 2023

Hi guys,

I am using laravel version 10.31

my app.css file is empty, I tried running various commands in bash:

composer require laravel/ui

php artisan ui bootstrap

I installed node.js then ran commands npm install and npm run dev

Still nothing in my app.css file, in my app.scss file I do have this though:

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';

Any help what to do to get my app.css file compiled with code?

antimech · 2023-11-23T03:15:13Z

antimech
Nov 23, 2023

Mix is now replaced with Vite. When running npm run dev you can find your scss file here:
http://127.0.0.1:5173/resources/sass/app.scss

Run this if you want to build your frontend for production:

npm run build

Then you could find your css file in public/build/assets/.

By the way, Laravel UI is now a legacy package, you should consider using Laravel Breeze for new projects. Or, for something more robust, consider Laravel Jetstream.

7 replies

gurds91 Nov 23, 2023
Author

Where is the vite.config.js file located? I created this file myself and copied and pasted code from here

I ran PHP artisan ui bootstrap and I have the .scss file you are talking about.

antimech Nov 23, 2023

In the root directory of your project, delete the other one you created.

gurds91 Nov 23, 2023
Author

ok, I entered the command in bash , php artisan ui bootstrap --auth to do get the laravel ui with bootstrap preset, this is correct? Then I entered npm install and npm run dev.

So now I can just delete my app.css file in resources/css?

gurds91 Nov 23, 2023
Author

when I ran php artisan ui bootstrap command effectively it created a layout in the views section:

<!doctype html>

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left Side Of Navbar -->
                <ul class="navbar-nav me-auto">

                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="navbar-nav ms-auto">
                    <!-- Authentication Links -->
                    @guest
                        @if (Route::has('login'))
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                        @endif

                        @if (Route::has('register'))
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                            </li>
                        @endif
                    @else
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                {{ Auth::user()->name }}
                            </a>

                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="{{ route('logout') }}"
                                   onclick="event.preventDefault();
                                                 document.getElementById('logout-form').submit();">
                                    {{ __('Logout') }}
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </div>
                        </li>
                    @endguest
                </ul>
            </div>
        </div>
    </nav>

    <main class="py-4">
        @yield('content')
    </main>
</div>

antimech Nov 24, 2023

ok, I entered the command in bash , php artisan ui bootstrap --auth to do get the laravel ui with bootstrap preset, this is correct? Then I entered npm install and npm run dev.

Yes. Why not?

So now I can just delete my app.css file in resources/css?

Like I said.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

My app.css file is empty laravel 10 #49085

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 7 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

My app.css file is empty laravel 10 #49085

Uh oh!

gurds91 Nov 22, 2023

Replies: 1 comment · 7 replies

Uh oh!

Uh oh!

antimech Nov 23, 2023

Uh oh!

gurds91 Nov 23, 2023 Author

Uh oh!

Uh oh!

antimech Nov 23, 2023

Uh oh!

gurds91 Nov 23, 2023 Author

Uh oh!

gurds91 Nov 23, 2023 Author

Uh oh!

antimech Nov 24, 2023

gurds91
Nov 22, 2023

Replies: 1 comment 7 replies

antimech
Nov 23, 2023

gurds91 Nov 23, 2023
Author

gurds91 Nov 23, 2023
Author

gurds91 Nov 23, 2023
Author