Как исправить ошибку 404 с app.js и app.css в Laravel? - PullRequest
Новая
       100

Как исправить ошибку 404 с app.js и app.css в Laravel?

1 голос
/ 12 ноября 2019

Я использую Laravel 6 и Bootstrap 4.

Я сделал небольшое приложение и пытался изменить цвет фона тела в файле CSS, но заметил, что он не работает.

Итак, я проверил инструменты для разработчиков и увидел две ошибки в app.js и css / app.css

"Не удалось загрузить ресурс: сервер ответил с состоянием 404 (не найдено)"

Я попытался добавить "/" перед путем CSS, ноЯ потерпел неудачу.

Просмотр: 

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/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;
}

Я хотел бы видеть светло-голубойтело, но по какой-то причине это не работает. У вас есть идея?

Ответы [ 3 ]

1 голос
/ 12 ноября 2019

Я пытался изменить цвет фона тела в файле css, но заметил, что он не работает.

Если это новая установка Laravel, вызахочу запустить npm install. установить все внешние ресурсы (css, js и т. д.). Если вы никогда не вносили никаких изменений в css или js, в терминале вам нужно будет выполнить эту команду: npm run dev или npm run watch. Вот больше документации для Laravel Mix.

Вам не нужно трогать фактический файл .css;он будет перезаписан при компиляции ресурсов. Использование приведенных выше команд перекомпилирует все файлы .scss в .css.

Надеюсь, это поможет!

0 голосов
/ 12 ноября 2019

Эта ошибка указывает на неправильное расположение app.js и app.css:

"Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найдено)"

Решение:

Сделайте так, чтобы ваша структура каталогов была такой для JS: /public/js/app.js

Сделайте вашу структуру каталогов такой же, как для CSS:/public/css/app.css

0 голосов
/ 12 ноября 2019

Вам необходимо скомпилировать активы. (предположим, вы уже установили npm)

Выполнить 

npm run prod - if production

ИЛИ 

npm run dev  - if development

Также вы можете изменить цвета в файле resources/sass/_variables.scss перед компиляцией ресурсов.

...