**I installed livewire ,laravel mix and jetstream on laravel 8. But the Jetsream's css and js is not working and shows a message in header that '#vite(['resources/css/app.css', 'resources/js/app.js'])' **
App.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
#livewireStyles
<!-- Scripts -->
#vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
go to (app.blade.php, guest.blade.php) and remove #vite like this
#vite(['resources/css/app.css', 'resources/js/app.js']) => Remove this and add following
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
Replace the Welcome.blade.php and guest.blade.php and test.blade.php with this code, It's work for me
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
#livewireStyles
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
#livewireScripts
</body>
</html>
just paste two line inside ( app.blade.php, guest.blade.php ) instead of #vite like this :
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
{{-- #vite(['resources/css/app.css', 'resources/js/app.js']) --}}
and paste this code inside this folder public/mix-manifest.json
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
I ran into the same issue, I solved it by switching to PHP 8. You have to delete your project and re-create it after switching.
It's probably a caching problem fo:
Run the command:
sail restart
Laravel 8 does not support vite. So this is why you see your directive as a string.
Besides, for me, I have to force the assets to load via HTTPS schema. In AppServiceProvider.php boot() according to this https://stackoverflow.com/a/51819095/8369356.
Removing #vite(['resources/css/app.css', 'resources/js/app.js']) and replacing it with
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
worked for me
if you update your project from laravel-mix to Vite.
Just use
"npm run dev"
after that
run: "npm run build"
it works fine
I had this issue and discovered the reason was because I didn't name the file correctly, I used app.php instead of app.blade.php. Fixing that fixed the issue.
VITE build configurations comes with only Laravel 9 & above, if we pull breeze or Jetstream to lower version [Below Laravel 9], it will cause this issue, because lower version got the configuration of Laravel mix. Breeze & Jetstream by default with VITE configuration despite the version of laravel.
You have to update your laravel version above 9, for that you have to update your local PHP version above 8
Just go to config/app.php and:
'url' => env('APP_URL', 'http://localhost'),
// 'asset_url' => env('ASSET_URL', '/'),
'asset_url' => env('APP_URL', '/'),
.env file may do not content ASSET_URL parameter. Just set ASSET_URL same to APP_URL
All 404 NOT FOUND errors can be tracked to an URL misconfiguration
Dear Excellent developes.
I'm trying to duild static web site with Hugo (Netlify CMS).
I wanna build from scratch, if I can;-) ( I designed the site by myself. SO I wanna write sass from scratch).
But, sass files aren't read successflly.
Do you solve the problem?
I checked there pages to solve it , But I couldn't
https://gohugo.io/hugo-pipes/scss-sass/
https://discourse.gohugo.io/t/custom-css-throws-type-nil-not-supported-in-resource-transformations/19942
the structure of this Web site
Basically, there are not many changes from Hugo install.
layouts/index.html // I write there the following code.
resources/_gen/assets/sass/main.scss // I wrote simple css to this file → html {background: yellow;}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
{{ $sassTemplate := resources.Get "sass/main.scss" }}
{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.relURL }}">
</head>
<body>
<h1>Nice. It's looking good already.</h1>
<ul>
{{ range (where .Pages "Section" "blog") }}
<li>
<a href="{{ .RelPermalink }}">
{{ .Title }}
</a>
</li>
{{ end }}
</ul>
</body>
</html>
Error messages
Rebuild failed:
Failed to render pages: render of "home" failed: "/Users/RPOISITORY-NAME/layouts/index.html:11:40": execute of template failed: template: index.html:11:40: executing "index.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations
↓
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
{{ $sassTemplate := resources.Get "sass/main.scss" }}
{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.relURL }}">
</head>
hugo v0.81.0+extended darwin/amd64 BuildDate=unknown
Thanks in advance.
Your .scss files must be in the assets folder at the root of your project, and not in the sub-folder resources/_gen/assets.
I wrote a post in french on the topic, maybe you can grab some hints / use a translator
I have a Laravel app that uses a tiny bit of Vue code in the blade templates. There's a problem navigating from view to view, almost every time there's a brief delay before the CSS is loaded where the raw text of the page shows without any formatting. It shows for about 1/2 a second and then the CSS kicks in and it looks correct. I can't find any reason for this, I tried changing the mix('css/app.css') etc so that it's not having to reload every time, but I can't figure out how to fix it.
I'm not sure if Vue is somehow delaying the css from loading? Any ideas what it could be? I'll paste the top section of the blade template below. I just upgraded to Laravel 8 but the same was happening with Laravel 7.
Thanks for your help!
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="title" content="Pono Admin">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Admin</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="{{ mix('css/admin.css') }}" rel="stylesheet">
#hasSection('style')
#yield('style')
#endif
<!-- Scripts -->
#hasSection('script')
#yield('script')
#else
<script>
var vmMixinsAdmin = '';
</script>
#endif
<script src="{{ mix('/js/app.js') }}" defer></script>
<script>
var vmMixinsApp = '';
let vroundedBtn = false;
let vunreadNotificationCount = {{ auth()->user()->unreadNotifications()->count() }};
</script>
</head>
<body>
<div id="vm">
<main id="app-main" class="container-fluid px-0">
etc
Someone had something similar and decided to show an overlay on foreground and hide it after the page has loaded. I'm not sure that it's the best solution but it could help:
Force browsers to load CSS before showing the page
Here is my code for Layout Blade
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/aos.css') }}" rel="stylesheet">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.min.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
#yield('content')
</main>
<div class="col-sm-3">
<div class="partners">
<img src="imgs/logo_footer.png" alt="" class="img-responsive">
<img src="imgs/logo_footer2.png" alt="" class="img-responsive" style="max-height:35px;">
<img src="imgs/logo_footer3.png" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
And it works fine.
With result "imgs/logo_footer.png"
But in the content, using the same way, the result is "http://127.0.0.1:8000/imgs/beatriz02062020.png"
I tryed with asset().
I think you'll need to dd(asset($pathToYourImage)); somewhere in the view to be sure of the path. Than comment below to show me the result
You can use the following line for displaying image:
<img src="{{URL::to('/').'/imgs/logo_footer.png'}}" alt="" class="img-responsive">
for regular images in public folder like public/assets/images/img.png you can try
<img src="{{url('assets/images/img.png')}}">
or
<img src="{{assets('assets/images/img.png')}}">
also if you online you should consider change APP_URL in your .env file
as url() or assets() get the APP_URL value and use it in url
do not forget to run
php artisan config:clear
after any change in online version of .env file
if your image is uploaded image form a form read the these down.
the point is that the upload path is relevant to storage folder in your laravel project. so if you do every thing by the book, you should try the following,
first thing check files in storage/app/public folder , you should found your files there
also check your settings in config/filesystem.php in your project.
if you found the files in storage/app/public/{any-folder-name}
and the project configuration in config/filesystem.php is public
do the following
run command
php artisan storage:link
this will make a symlink (a shortcut)
then use this piece of code to get your images
Storage::url($image_path)
OK, it has taken me forever (since Friday) to configure everything related to Laravel, mcrypt & PHPStorm and now I am only trying to display a simple form field - it's completely blank
#section('content')
{{ Form::open() }}
{{ Form::label('username', 'Username:') }}
{{ Form::text('username') }}
{{ Form::close() }}
#stop
When I inspect element, no form exists and there are no errors - WTF?
My file is called index.blade.php
Within my routes.php:
Route::get('/', function()
{
return View::make('index');
});
The documentation makes it look so easy
As lagbox says you probably just need to extend a layout. So you have master.blade.php (in a layouts folder in your view probably) which has your HTML head/body tags etc:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/dist/css/app.min.css" rel="stylesheet">
</head>
<body>
#yield('content')
<script src="/dist/js/app.min.js"></script>
</body>
</html>
Then you have your index.blade.php file which will have something like this:
#extends('layouts.master')
#section('content')
{{ Form::open() }}
{{ Form::label('username', 'Username:') }}
{{ Form::text('username') }}
{{ Form::close() }}
#stop
Take a look at the Laravel Blade documentation for more info: Laravel Blade