страницы авторизации не получают css в laravel

Question

Я новичок в ларавеле. Я создал проект. И я выполнил для него следующие команды.

composer require laravel/ui --dev
npm install
npm run dev
php artisan ui vue
php artisan ui vue --auth

после этой команды я получаю Login а также Registerменю на моей странице приветствия. Теперь моя приветственная страница laravel загружается правильно. Но когда я нажимаю на логин, он показывает простой HTML. Я поискал и проверил app.blade.php на предмет ссылок css и js. Выглядит нормально. Layouts / app.blade.php со следующими ссылками

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}" defer></script>

Где должна быть проблема? Почему вход и регистрация не получают CSS, когда страница приветствия получает CSS? Пожалуйста, направьте.

Answer 1

Шаг 1:

• Скачать nodejs
• Установите nodejs на свой компьютер

Шаг 2:

• затем откройте корень вашего проекта и команду
• composer require laravel/ui
• php artisan ui vue --auth
• npm install
• npm run dev

для получения помощи посмотрите это видео: https://www.youtube.com/watch?v=hOYW3jqh19I&t=9s

Answer 2

Очень простое решение этой проблемы - использовать следующий cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

вместо того

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

ссылки, которые я предоставил, являются загрузочным cdn и проверьте это. Он будет использовать слова и использовать

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

вместо того

<link href="{{ asset('js/app.js') }}" rel="stylesheet">

Answer 3

Я пробовал следующие команды в laravel 8, и он хорошо работает

      composer require laravel/ui
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev
npm run production

Answer 4

Иногда кеш может быть проблемой в таком случае, вы можете запустить

php artisan cache:clear и необязательно php artisan view:clear.

Answer 5

Вам нужно выполнить следующие команды для laravel 7.x.

Решение

Сначала перейдите в корневую папку вашего проекта C: \ Whatever \ Your_project_name>

            composer require laravel/ui

Попробуйте любую из приведенных ниже команд в соответствии с вашей интерфейсной структурой.

            php artisan ui vue --auth
      php artisan ui bootstrap --auth
      php artisan ui react --auth

В конце не забудьте бежать

            npm install

Если ваш пользовательский интерфейс не работает должным образом, попробуйте следующую команду.

            npm run production

---

Если приведенные выше команды не работают для вас.

---

Причина : ошибка связана с тем, что в общедоступном / css / app.css нет кода css, когда вы выполнили все команды, но в этой папке все равно не было бы кода.

Возьмите файл или код отсюда https://github.com/sabaoonbedar/Css-File-For-Laravel-Developers/tree/master и поместите его в свой проект public / css / app.css ИЛИ создайте аналогичные папки, если вы этого не сделаете. т существует.

Answer 6

Вы можете скачать эти два файла отсюда:

1. CSS файл

2. JS файл

Затем создайте папки css и js в общей папке, просто поместив:

Файл CSS: app.css в папку_проекта / public / css /

JS-файл: app.js в папку_проекта /public/js/

Это работа для меня. Думаю, у вас тоже сработает. Спасибо.

Answer 7

Я пробовал следующие команды в laravel 8, и он работает хорошо, вы также можете попробовать.

      composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev
npm run production

Answer 8

Мне кажется, что ваша версия node.js устарела. Просто обновите Node.js и начните с самого начала, установив laravel ui и так далее.

      composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install
npm run dev

Надеюсь, это решит проблему.

Answer 9

Вы должны компилировать пакеты, используя npm run watchкоманда. после этого вы можете бежать npm run dev

Answer 10

Для меня это было просто npm run devкоманда. В моем ubuntu 19.10 он должен работать с sudo

Answer 11

Выполните следующие команды в своем проекте Laravel.

      composer require laravel/ui 
php artisan ui bootstrap --auth
npm install
npm run dev

Answer 12

пробег

1. npm install
2. npm run dev
3. npm run watch для продолжения компиляции

Answer 13

Вам необходимо очистить кеш в вашем браузере. Чтобы убедиться в этом, перейдите в режим инкогнито и попробуйте ввести URL еще раз. Если это сработает, проблема в этом.

Answer 14

Я столкнулся с той же проблемой, что CSS и js работают со ссылками CDN, но не с CSS по умолчанию. поэтому в файлах public / css / app.css и js не было файлов без кода CSS, поэтому я копирую и вставляю код и файлы в общий каталог из моего другого каталога laravel, и теперь это работает нормально.

Answer 15

вы можете использовать стили и скрипт следующим образом:

Стиль :

       <link href="/css/app.css" rel="stylesheet">

JS:

       <script src="/js/app.js"></script>

Answer 16

Я сталкиваюсь с той же проблемой при реализации composer require laravel/ui в laravel версии 7, но я исправил это, выполнив следующие шаги.

Первый :

• Скачать nodejs
• Установите nodejs на свой компьютер

Secound: запустите эту команду

      composer require laravel/ui

Однажды laravel/ui пакет установлен, вы можете установить леса внешнего интерфейса с помощью Artisan-команды ui:

      // Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Чтобы генерировать node_module папка внутри вашего проекта, выполните следующую команду

      npm install

После установки зависимостей с помощью npm install вы можете скомпилировать файлы SASS в простой CSS с помощью Laravel Mix. Команда npm run dev обработает инструкции в файле webpack.mix.js. Обычно ваш скомпилированный CSS будет помещен в каталог public / css:

      npm run dev

когда-нибудь вам может понадобиться запустить эту команду npm audit fix или же npm audit fix --force для исправления некоторых пакетов, если они требуются.

Может быть, когда-нибудь запустив эту команду npm run dev или он покажет вам ошибку, как показано ниже.

       @ dev C:\xampp\htdocs\Auth
 npm run development 
@ development C:\xampp\htdocs\Auth
mix
        Additional dependencies must be installed. This will only take a moment.
 
        Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`

jus запустить npm run watch снова начнется Mix █████████████████████████ emitting (95%) после успеха сборка тоже будет успешной.

Answer 17

после установки все попробуйте это

      npm update vue-loader

Answer 18

В моем случае я просто скачал последнюю версию nodejs и установил ее. После этого просто введите npm run dev. И обновите свой браузер и вперед!! Ваше здоровье!!

Answer 19

Эта команда работает в моей машинной команде.

      npm run dev

Answer 20

         composer require laravel/ui

   php artisan ui vue
   npm install
   npm run dev

   php artisan ui vue --auth
   npm install
   npm run dev

Вам нужно будет вызвать npm install и npm run dev для обоих строительных лесов.

Answer 21

Выполните команду:

npm uninstall popper.js && npm i @popperjs/core 

чтобы удалить устаревший пакет и установить новый Popper v2.

Answer 22

Публикуйте свой CSS. Я имею в виду, что храните ваш CSS в общедоступном каталоге вашего проекта.