Why my layout doesn't work properly in welcome.blade-CodePudding

i'm working on a laravel project and i prepared a layout for welcome.blade but css and html don't work properly . somehow the project can't read them .

i make you sure that my paths is correct even i change folders and paths in public but it didn't work

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="MealOrder">
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <meta name="author" content="HiBootstrap">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Fafo - قالب رستوران و فست فود</title>
    <link rel="icon" src="/assets/images/tab.png" type="image/png" sizes="16x16">

    <link rel="stylesheet" src="/assets/css/bootstrap-reboot.min.css" type="text/css" media="all" />
    <link rel="stylesheet" src="/assets/css/bootstrap.rtl.min.css" type="text/css" media="all" />

    <link rel="stylesheet" src="/assets/css/animate.min.css" type="text/css" media="all" />

    <link rel="stylesheet" src="/assets/css/owl.carousel.min.css" type="text/css" media="all" />
    <link rel="stylesheet" src="/assets/css/owl.theme.default.min.css" type="text/css" media="all" />


    <link rel="stylesheet" src="/assets/css/jquery-ui.css" type="text/css" media="all" />

   
    <link rel="stylesheet" src="/assets/css/responsive.css" type="text/css" media="all" />


    @livewireStyles
</head>
<body>
  .
  .
  .
  .
  <script src="/assets/js/jquery-3.5.1.min.js"></script>
  <script src="/assets/js/bootstrap.bundle.min.js"></script>
  <script src="/assets/js/jquery-ui.js"></script>
  @livewireScripts   
</body> 
</html>

CodePudding user response：

I assume you use Laravel 9 because Laravel now is using vite instead of webpack/laravel-mix as we used to see, and the way vite injects styles & scripts in layouts pages are not the same as it was.

you will need to add the following blade directive into your layout file:

@vite(['resources/css/app.css', 'resources/js/app.js'])

and then re-run npm run build or npm run dev to re-bundle your assets.

more about Bundling Assets (Vite)

CodePudding user response：

its better change all src to asset() for example: instead of

write

<link rel="stylesheet" src="{{asset('assets/css/animate.min.css')}}" type="text/css" media="all" />

and for scripts do same