ما معني رسالة الايرور

رسالة الخطأ تخبرك بوجود مشكلة في الـ loader الخاص بمعالجة css في wepbakc.

وتخبرك بأنه يجب ان تقوم بإعداد الـ loader بشكل صحيح

Webpack في حد ذاته يعرف فقط جافا سكريبت ، لذلك عندما نريده أن يحزم أي نوع آخر من الموارد مثل .css أو .scss أو .ts ، يحتاج webpack إلى المساعدة وتجميع تلك الأنواع من الموارد غير جافا سكريبت. loaders هي الأدوات المساعدة . 

css-loader  من شأنها أن تساعد Webpack على جمع CSS من جميع ملفات css المشار إليها في التطبيق الخاص بك ووضعها في سلسلة.ثم سوف يأخذ style-loader سلسلة الإخراج التي تم إنشاؤها بواسطة مُحمل css أعلاه ويضعها داخل علامات

لذلك عندما تحاول التعامل مع ملفات مثل css بدون ال loaders الخاصة بها css-loader و style-loader مثلاً سيظهر لك الخطأ السابق 

لذلك يجب تثبيت هذه الحزم

npm install css-loader style-loader --save-dev

ثم بعد ذلك إضافة الإعدادات التالية لملف ال webpack.config.js

{
  test:/\.css$/,
    use:['style-loader','css-loader']
}

الإعدادات السابقة يتم إضافتها للمصفوفة rules

أنصحك باستخدام Vite بدلاً من webpack فهو يستخدم إعدادات تلقائية لمعظم المشاريع القياسية ويتعرف تلقائيًا على معظم أنواع الملفات مثل HTML و CSS و JavaScript و JSON و PNG و SVG وغيرها، ويحل محل webpack في الغالب في مشاريع Vue.js و Svelte وReact.

فكل ما تحتاجه هو التالي:

npm init vite@latest

والآن قم بإختيار المشروع الذي تريد العمل عليه، ومثلا Vanilla هنا تعني HTM,CSS, JS فقط بدون استخدام إطار عمل.

والآن ستجد السكريبتات التالية تم إضافتها لملف package.json ومن خلال الأمر npm run dev ستتمكن من تشغيل مشروعك دون أية مشكلة.