واجهة تسجيل الدخول تظهر من دون تنسيقات في لارافيل

بعد تثبيت Laravel يجب عليك تنفيذ الأوامر التالية لتحميل ملفات الجافاسكريبت و css للمشروع 

composer require laravel/ui:^2.4

php artisan ui bootstrap

npm install
npm run dev

يقوم لارافيل بفصل ملفات CSS و JavaScript في جزمة منفصلة laravel/ui، لكي يتم تثبيتها عند الحاجة لها فقط، ويمكن تثبيت هذه الحزمة عن طريق الأمر التالي كما وضح الأستاذ @بلال زيادة

composer require laravel/ui:^2.4

بعد تثبيت الحزمة يجب أن يتم إستخراج ملفات CSS و JavaScript منها إلى مجلد المشروع نفسه وذلك عن طريق الأمر

// في حالة إستخدام Bootstrap 
php artisan ui bootstrap

// في حالة عمل تطبيق ب Vue.js
php artisan ui vue

// في حالة عمل تطبيق React.js
php artisan ui react

// لتوليد ملفات login / registration يتم إضافة --auth للأمر
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

بعد تنفيذ الأمر السابق يجب تثبيت كل الحزم الموجودة في ملف package.json عن طريق الأمر

npm i

بمجرد إنتهاء الأمر السابق يمكن تحويل ملفات SCSS إلى CSS وتجميعها في ملف واحد وهو public/css/app.css، ونفس الشيء بالنسبة لملفات js عن طريق تنفيذ الأمر:

npm run dev

لاحظ أن ملف public/css/app.css ,وملف public/js/app.js لن يكونا مضغوطين وستظهر أي أخطاء js في الـ console لتسهل عملية التطوير، لكن بعد الإنتهاء من المشروع يجب ضغط هذه الملفات وإخفاء كل رسائل الخطأ عن طريق تنفيذ الأمر:

npm run prod

 بالتوفيق.

للأسف تطلع لي أخطاء , أتمنى حلها لي لأني طولت فيها , ممكن تطلعون على الملف المضغوط للتأكد

project.zip

بتاريخ 14 ساعات قال Ali Habib:

للأسف تطلع لي أخطاء , أتمنى حلها لي لأني طولت فيها , ممكن تطلعون على الملف المضغوط للتأكد

يجب أن يحتوي مشروعك على ملفين لكي يعمل هذا الأمر وهما:

• resources/sass/_variables.scss

• resources/js/bootstrap.js

الملف الأول موجود مسبقًا في مشروعك، لذلك عليك إنشاء الملف الثاني فارغًا، وبمجرد إضافة هذا الملف سيعمل كل شيء معك بشكل سليم بالنسبة للأمر 

php artisan ui bootstrap

لكنك ستواجهة مشكلة أخرى عند تشغيل الأمر

npm run dev

وذلك لأن لا يوجد ملف resources/js/app.js لذلك عليك إضافته بنفس طريقة إضافة الملف resources/js/bootstrap.js (مجرد ملف فارغ سيفي بالغرض).

بالتوفيق.