حل مشكلة window is not defined في webpack

عند استخدام webpack مع React و react-css-modules وملفات scss، قد تحدث مشكلة مع التحميل الخاص بملفات الـ scss حيث يتعذر على webpack فهم متغيرات الـ window المستخدمة في ملفات الـ scss. لحل هذه المشكلة، يمكنك استخدام مكتبة css-loader مع خيار modules لتمكين استخدام متغيرات الـ window. يمكنك تحقيق ذلك من خلال تعديل ملف webpack الخاص بك كما يلي:

1. قم بتثبيت css-loader من خلال npm:

   cssCopy code
   npm install css-loader --save-dev
   

2. قم بتعديل تحميل scss loader في ملف webpack الخاص بك ليصبح كالتالي:

   javascriptCopy code
   {
       test: /\.scss$/,
       loader: ExtractTextPlugin.extract('style', ['css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]', 'resolve-url', 'sass?outputStyle=expanded'])
   }
   

   تحتوي الخاصية modules على القيمة true، مما يخبر webpack بتمكين استخدام متغيرات الـ window في ملفات الـ scss.

بعد التعديل، قم بإعادة تشغيل عملية البناء ويجب أن تعمل بدون مشاكل.

بالطبع! عند استخدام css-loader مع خيار modules، يتم تفعيل تقنية CSS Modules التي تسمح بتفادي التداخلات بين أسماء الفئات في CSS. عندما تقوم بتضمين css-loader?modules في تكوين webpack الخاص بك، يتم تحويل أسماء الفئات في ملفات CSS إلى أسماء فريدة تضمن عدم تداخلها مع أسماء الفئات الأخرى في المشروع.

على سبيل المثال، إذا كان لديك ملف CSS بهذا الشكل:

cssCopy code
.myClass {
    color: red;
}

عند استخدام CSS Modules، ستتحول الفئة myClass إلى فئة فريدة تبدو تقريبًا كالتالي:

cssCopy code
.Button_myClass__1WgN9 {
    color: red;
}

تلاحظ القيمة 1WgN9 الفريدة التي تم إضافتها إلى اسم الفئة myClass، مما يجعلها فريدة داخل ملف الستايل الخاص بك.

باستخدام هذه التقنية، يمكنك تجنب التعارضات في أسماء الفئات وتحسين إدارة الستايلات في مشروعك.