webpack sass-loader An @import loop has been found

محمد لارافيل · 15 فبراير 2023

أحاول تحديث sass-loader و webpack إلى أحدث إصدار ولكني أتلقى خطأ:

An @import loop has been found:

أحتاج إلى استيراد ملفين باستخدام خاصية additionalData لمحمل sass وهو ما يلي:

{
     loader: 'sass-loader',
     options: {
               sourceMap: true,
               additionalData: '@import "sass/_themes.scss";@import "sass/_variables.scss"; ',
               sassOptions: {
                   exclude: 'src/store', // the components that are using the `_themes.scss` are located here
                   includePaths: [path.resolve(__dirname, './src')],
               },
     },
}

وفي بعض مكوناتي ، يجب أن أستخدم الاستيراد {Theme} من 'sass / _themes.scss' هذا هو المكان الذي أواجه فيه مشكلة:

SassError: An @import loop has been found:
           sass/_themes.scss imports sass/_themes.scss
        on line 1 of sass/_themes.scss

كيف يمكنني استبعاد هذه المكونات من استيراد additionalData ؟

Mustafa Suleiman · 19 فبراير 2023

خاصية additionalData تقبل الدوال أيضًا يمكنك كتابة الشروط التي تريدها، وإليك شرح الكود بعد التعديل:

الكود هو عبارة عن دالة JavaScript تستخدم في تعريف قواعد تحميل الملفات من نوع SASS (بامتداد .scss) في مشروع webpack. ويقوم الكود بالتالي:

يأخذ المحتوى وسياق التحميل كمدخلات (content, loaderContext).

يقوم بقراءة مسار الملف المستهدف (resourcePath) ومجلد العمل الأساسي (rootContext) من loaderContext.

يقوم بحساب المسار النسبي للملف المستهدف من مجلد العمل الأساسي باستخدام الدالة path.relative().

يقوم بفحص ما إذا كان المسار النسبي للملف المستهدف ينطبق على النمط "src\store" باستخدام الدالة match().

إذا كان المسار النسبي ينطبق على النمط "src\store" يتم إرجاع المحتوى دون تغيير.

إذا لم ينطبق المسار النسبي على النمط "src\store"، يتم إضافة سلسلة نصية تحتوي على عبارات import لملفات scss داخل مشروع webpack، وتتبع ذلك بالمحتوى الأصلي للملف المستهدف.

بشكل عام، يمكن استخدام الكود لتحميل ملفات SASS في مشروع webpack، مع إضافة عبارات import لملفات أخرى داخل المشروع المتعلقة بالموضوع المستخدم في SASS.

additionalData = (content, loaderContext) => {
  const { resourcePath, rootContext } = loaderContext;

  const relativeFilePath = path.relative(rootContext, resourcePath);
  const isExcluded = relativeFilePath.match(/^src\\store\\.*/);

  return isExcluded
    ? content
    : '@import "sass/_themes.scss";@import "sass/_variables.scss";' + content;
};

webpack sass-loader An @import loop has been found

السؤال

محمد لارافيل

1 جواب على هذا السؤال

Recommended Posts

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية