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

السؤال

نشر

أنا أستخدم webpack 5 config لتشغيل مستودع react ويبدو أن كل شيء يعمل بشكل جيد باستثناء تحميل الصور ، لدي خطأ لا أفهمه:

ERROR in ./src/assets/styles/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'file-loader' in...........

لقد حاولت إعادة تثبيت بعقب mini-css-extract-plugin الذي لم ينجح ، ولست متأكدًا مما يمكن أن يكون المشكلة هنا.

  rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: "images",
            },
          },
        ],
      },

 

Recommended Posts

  • 0
نشر

يبدو أنك تحاول وضع صورة باستخدام الخاصية background-image في ملف main.scss, وبالتالي عند معالجة ملف main.scss سوف يتم معالجة الصورة والتعامل معها كملف, أنت تستخدم حزمة file-loader لمعالجة الملفات, الخطأ لديك كالتالي 

 Module not found: Error: Can't resolve 'file-loader'

المشكلة أنك لم تقم بتثبيت الحزمة file-loader ولذلك يعطيك هذا الخطأ, هناك مشكلة أخرى أنك تحاول استخدام حزمة file-loader في webpack 5  ولكن في webpack 5 لست بحاجة لاستخدام محملات وحزم لمعالجة الملفات لأنها تأتي جاهزة لمعالجة الملفات, يمكنك الاكتفاء بكتابة الكود التالي

rules: [
  {
    test: /\.(jpe?g|png|gif|svg)$/,
    type: 'asset/resource',
  },
]

 

  • 0
نشر

جرب أن تقوم بتثبيت ال file loader 

npm i file-loader

إن لم يعمل معك قم بضغط مجلدات المشروع وإرسالها لتحديد الخطأ بدقة أكبر

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...