• 0

التنسيقات لا تظهر عند تشغيل المشروع عن طريق webpack

لقد تم تحميل جميع ملفات npm و لكن عند فتح ملف dist تظهر بشكل غير منظم على المتصفح قمت بعمل clear data و run بعد ذلك و لكن لم تظهر كما بالتنسيق المطلوب

كيف بامكاني تجاوز هذه المشكلة بكل مرة تواجهني بكل مرة افتح المشروع و أرى تلك المشكلة قد قمت بفتح ملف سابق لتأكيد على أنه الخلل ليس من المشروع الحالي تم عمله مع المدرب على الwebpack ظهرت تلك المشكلة أيضا 

كيف بامكانني تجاوز تلك المشكلة عندما تظهر لدي بكل مرة

 

 

 

 

IMG-20210510-WA0004.jpg

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

مرحبا عطاف
المشكلة كما هو واضح في الصورة التي أرفقتيها أن بوتستراب غير مثبتة أو انها مثبتة ولكن غير مضمنة بشكل صحيح
ثانيا تثبيت كل الحزم غير كافي لعمل المشروع بشكل جيد, يجب أن تكتبي جميع الأكواد اللازمة لمعالجة كافة الملفات في ملف webpack.config.js , وأيضا تأكدي بانك تضمنين كافة الملفات في ملف index.js
وتأكدي بأنك تضمنين ملف index.js بطريقة صحيحة في ملف index.html
شكرا لك

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يظهر من الصورة أنك تقومين بفتح مشروع الـ webpack عن طريق ملف الـ index بداخل مجلد dist . و هذا في الغالب سيؤدي بكل مسارات الملفات من الشكل main.css/ التي قد قمت بتضمينها تظهر على هذا النحو بعد البناء :

file:///main.css

و بالتالي فهي غير قابلة للوصول من الأساس و لو قمت بفتح الـ console ستجدين خطأ يخبرك أن الملفات غير موجودة . 

فالحل هو فتح المشروع عن طريق طباعة الأمر :  

npm run serve

الذي سيقوم بدوره بطباعة التالي : 

Project is running at http://localhost:9000/
webpack output is served from /
Content not from webpack is served from /path/to/some/path/project/dist
wait until bundle finished: /
Compiled successfully.

بعد البناء بنجاح يمكنك التصفح إلى المسار الموصوف على هذا النحو : 

http://localhost:9000/

و سيتم إظهار كل الملفات شاملة ملفات التنسيق و السكربتات بشكل صحيح . 

ملاحظات :

في حالة ما لم يعمل الأمر بشكل صحيح و قمت بمواجهة خطأ من هذا النوع : 

missing script: serve

فتأكدي أن تقومي بتسجيل الأمر و إضافته إلى كائن scripts بملف package.json على هذا النحو : 

"scripts": {
    
    "serve": "webpack serve --mode development"
},

و الان يمكنك طباعة الأمر و التصفح إلى المسار الموصوف بعد نجاح البناء , و إستعراض مشروعك بشكل عادي . 

تمّ تعديل بواسطة Adnane Kadri
خطأ إملائي
2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

مشكلتك يمكن أن يسببها الكثير من الأخطاء والهفوات وعادة مشكلة كهذه تكون بسبب

  • نسيان تثبيت bootstrap
  • نسيان تثبيت ال loaders التي تتعامل مع css في webpack.config.js
  • نسيان تضمين الrules الخاصة بالloaders في webpack.config.js
  • نسيان تضمين ملفات css في index.js

طرق مساعدة لحل المشكلة

  • تشغيل المشروع لرؤية ما ان تواجد خطأ
  • تفحص مجلد dist وبالتحديد main.css ويمكن ان يكون ملف ال css الرئيسي الخاص بك اسمه مغاير لكن الكود داخله سوف يعطيك فكرة عن المشكلة 
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن