**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
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)
I'm new to jekyll, I read the infos from their website and did the basic stuff and all worked ok. Now, I'm trying to learn more by doing a theme to it. The idea is I got a html template and I'm trying to make it to jekyll. The repo is at prologue-like-jekyll-theme.
I have a _config.yml with some info:
# Site settings
title: Personal Jekyll theme based on Prologue by HTML5 UP.
description: "Write your site description here."
baseurl: ""
url: ""
avatar: images/avatar.png
email: your-email#yourdomain.com
copyright_name: Your/Project/Corporate Name
I did a default.html layout:
<!DOCTYPE HTML>
<html>
<head>
<title>{{ site.title }}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
</head>
<body>
<!-- Header -->
{% include header.html %}
<!-- Main -->
<div id="main">
{{ content }}
</div>
<!-- Footer -->
{% include footer.html %}
</body>
</html>
I execute jekyll server, it runs but the site.title is not loading. The funny thing is if I change to site.time it works. Don't know why this is happen, any clue?
The _config.yml file is in _layouts folder, it should be in the root folder.
I have a blade template that I created and I want to add css files depending on the page that it is called to.
The file below is the main file called ._head.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="">
<title>{{ 'Login' }}</title>
<!--Core CSS -->
{{ HTML::style('asset/bs3/css/bootstrap.min.css') }}
{{ HTML::style('asset/css/bootstrap-reset.css') }}
{{ HTML::style('asset/assets/font-awesome/css/font-awesome.css') }}
{{ HTML::style('asset/bs3/css/bootstrap.min.css') }}
<!-- Custom styles for this template -->
#yield('addcss')
<!-- Ends Here -->
{{ HTML::style('asset/css/style.css') }}
{{ HTML::style( 'asset/css/style-responsive.css') }}
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>{{ HTML::script('asset/js/ie8/ie8-responsive-file-warning.js') }}<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
I tried to add css to the above template using
#extends('layouts._head')
#section('addcss')
{{ HTML::style('asset/assets/bootstrap-datepicker/css/datepicker.css') }}
{{ HTML::style('asset/assets/bootstrap-daterangepicker/daterangepicker-bs3.css') }}
{{ HTML::style('asset/assets/bootstrap-datetimepicker/css/datetimepicker.css') }}
#stop
#include('layouts._header')
But the contents of the #section and the _head are now showing up inside the body tag after the contents of _header template are displayed. What am I doing wrong here ? Thanks in advance.
You cant "include" something on the same file you "extend" without wrapping it in a section. You should do this:
#extends('layouts._head')
#section('addcss')
{{ HTML::style('asset/assets/bootstrap-datepicker/css/datepicker.css') }}
{{ HTML::style('asset/assets/bootstrap-daterangepicker/daterangepicker-bs3.css') }}
{{ HTML::style('asset/assets/bootstrap-datetimepicker/css/datetimepicker.css') }}
#stop
#section('header')
#include('layouts._header')
#stop
then in your .heads file put the yield of 'header' at the very bottom (or wherever you want it)
....
#yield('header')
</html>
Or if the file remains the same in all views - just do this in .heads
....
#include('layouts._header')
</html>