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

webpack sass-loader An @import loop has been found

محمد لارافيل

السؤال

أحاول تحديث 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 ؟

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

Recommended Posts

  • 0

خاصية 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;
};
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...