javascript - How to fix error 404 with app.js and app.css in Laravel?

I am using Laravel 6 and Bootstrap 4.

I made a little app and I was trying to change the background color of the body in the CSS file but I noticed that it didn' work.

So I checked in the tools for the developers and I saw that there are two errors about app.js and css/app.css

"Failed to load resource: the server responded with a status of 404 (Not Found)"

I tried adding a "/" before the path of the CSS but I failed.

View:

<!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">
    <link href="" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href=".0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">


    <script src=".2.1.min.js"></script>
    <script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src=".0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>
<body style="overflow: hidden; ">
    <div id="app">
        @include('../inc/navbar')
        <main class="py-4">
            @yield('content')
        </main>
        <br>
        <br>
        <br>
        @include('../inc/footer')
    </div>
    </body>
</html>

CSS:

body {
    background-color: lightblue !important;
}

I would like to see the lightblue body but for some reason it doesn't work. Have you some idea?

I am using Laravel 6 and Bootstrap 4.

I made a little app and I was trying to change the background color of the body in the CSS file but I noticed that it didn' work.

So I checked in the tools for the developers and I saw that there are two errors about app.js and css/app.css

"Failed to load resource: the server responded with a status of 404 (Not Found)"

I tried adding a "/" before the path of the CSS but I failed.

View:

<!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.">
    <link href="https://fonts.googleapis./css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">


    <script src="https://code.jquery./jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>
<body style="overflow: hidden; ">
    <div id="app">
        @include('../inc/navbar')
        <main class="py-4">
            @yield('content')
        </main>
        <br>
        <br>
        <br>
        @include('../inc/footer')
    </div>
    </body>
</html>

CSS:

body {
    background-color: lightblue !important;
}

I would like to see the lightblue body but for some reason it doesn't work. Have you some idea?

Share Improve this question edited Nov 12, 2019 at 4:41 Udhav Sarvaiya 10.1k13 gold badges60 silver badges67 bronze badges asked Nov 11, 2019 at 23:06 Michele Della Mea 1,0023 gold badges19 silver badges40 bronze badges

you have a app.css file in yourproject/public/css and app.js file in yourproject/public/js ? – lagbox Commented Nov 11, 2019 at 23:26
The app.css file is in meetingapp/css/app.css and the app.js is in meetingapp/resources/js/app.js... but even adding the folder resources in the asset doesn't work. – Michele Della Mea Commented Nov 12, 2019 at 16:29

Add a ment |

4 Answers 4

Sorted by: Reset to default 5

I was trying to change the background color of the body in the css file but I noticed that it didn't work.

If this is a fresh install of Laravel, you'll want to run npm install. to install all of the front-end assets (css, js etc). If you have never made any changes to the css or js, in a terminal you'll need to run this mand: npm run dev or npm run watch. Here is more documentation for Laravel Mix.

You won't want to touch the actual .css file; it will get overwritten whenever the assets pile. Using the mands above will re-pile all of the .scss files into .css.

Hope this helps!

You need to pile the assets. (assume you have already installed npm)

Run

npm run prod - if production

npm run dev  - if development

Also you can change the colors in the file resources/sass/_variables.scss before piling the assets.

I solved the issue by running the following mands as explained here.

poser require laravel/breeze
php artisan breeze:install
npm install && npm run dev

This error indicates that the location of app.js and app.css is incorrect:

"Failed to load resource: the server responded with a status of 404 (Not Found)"

Solution:

Make your directory structure is like this for JS: /public/js/app.js

Make your directory structure is like this for CSS: /public/css/app.css

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to fix error 404 with app.js and app.css in Laravel? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)