اذهب إلى المحتوى
  • 0

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

Omar Abdelfattah2

السؤال

Recommended Posts

  • 0

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

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

  • 0

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

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

npm init vite@latest

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

project-name.jpg.3dedf1990c1236a461a98970cd752a48.jpg

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

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...