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

السؤال

نشر

أنا أستخدم 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',
  },
]

 

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...