كيفية استخدام وحدات CSS مع إنشاء تطبيق React

إجابة قصيرة: لا يمكنك ذلك. انت يجب ⏏

 ⏏

تحديث 18 كانون الثاني (يناير) 2018: وصل دعم CSS Module إلى تصميمات ألفا لـ Create React App v2 .

إليك كيفية استخدام وحدات CSS مع إنشاء تطبيق React App v2!

تابع القراءة إذا كنت بحاجة إلى إضافة وحدات CSS إلى نسخة أقدم من إصدار CR1.

يعد تطبيق Create React App على Facebook طريقة رائعة للبدء في مشروع React جديد بسرعة. وهو يدعم الكثير من الإعدادات الافتراضية المعقولة والشعبية. ولكن إذا كنت ترغب في إضافة وظائف غير مدعومة - خطوة CSS preprocessor مثل CSS Modules على سبيل المثال ، فسيتعين عليك إخراجها وتوجيهها بنفسك.

تشرح هذه المقالة كيفية استخدام CSS Modules في تطبيق Create React App ....

إن بدء مشروع جديد باستخدام Create React App (سأقوم فقط بتسميته باسم CRA باختصار) يعني أنه لم يعد عليك إدارة مجموعة من وحدات العقدة وتكوينات Webpack المربكة. بعد تثبيت CRA على مستوى العالم (تطبيق إنشاء وتفاعل-رد غزل عالمي بـ $ غزل عالمي) ، فإن بدء مشروع جديد أمر سهل مثل:

$ create-react-app myApp
$ cd myApp /
بداية الغزل $

التفاصيل الجيدة هي أن CRA تبقي نفسها محدثة ، لذا لن تحتاج إلى تحديث حزمة تطبيقات التفاعل - التطبيق العالمية يدويًا.

إمض في طريقك

تحصل على الكثير من القوة من تلك الأوامر الصغيرة. لسوء الحظ ، إذا كنت تريد أن تفعل أي شيء خارج ما تقدمه CRA ، فسيتعين عليك الذهاب بطريقتك الخاصة.

تشير الشائعات إلى أن أمر

الأمر "إخراج"

يأتي تطبيق React App مع أمر صغير مفيد لأولئك منا الذين لديهم آراء خاصة بنا حول مكونات إعداد React الرائع: الأمر eject:

إخراج الغزل $

تطبيق Create React App README واضح جدًا بشأن إيجابيات وسلبيات الإخراج:

ملاحظة: هذه عملية أحادية الاتجاه. بمجرد إخراجك ، لا يمكنك العودة!
إذا لم تكن راضيًا عن أداة الإنشاء وخيارات التكوين ، فيمكنك الإخراج في أي وقت. سيؤدي هذا الأمر إلى إزالة تبعية البنية المفردة من مشروعك.
بدلاً من ذلك ، ستقوم بنسخ جميع ملفات التكوين والتبعيات متعدية (Webpack ، Babel ، ESLint ، إلخ) مباشرة في مشروعك بحيث يكون لديك سيطرة كاملة عليها. جميع الأوامر باستثناء الإخراج ستظل تعمل ، لكنها ستشير إلى البرامج النصية المنسوخة حتى تتمكن من تعديلها. في هذه المرحلة ، أنت وحدك.
لست مضطرًا أبدًا إلى استخدام الإخراج. مجموعة الميزات المنسقة مناسبة لعمليات النشر الصغيرة والمتوسطة ، ويجب ألا تشعر أنك مضطر لاستخدام هذه الميزة. ومع ذلك ، ندرك أن هذه الأداة لن تكون مفيدة إذا لم تتمكن من تخصيصها عندما تكون جاهزًا لها.
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject

أقترح عليك قراءة ذلك بعناية وتقرر ما إذا كنت مستعدًا للانقسام.

إليك ما يحدث عند الإخراج

إخراج الغزل $
هل أنت متأكد أنك تريد إخراجها؟ هذا العمل دائم. [ص / N]
> ذ
إخراج ...
نسخ الملفات إلى / Users / user / src / myApp

يحل هذا محل الاعتماد الفردي لمشروعك على نصوص التفاعل مع عدد كبير من الحزم التي تعتمد عليها CRA. ينقل أيضًا بعض البرامج النصية والتكوينات إلى مشروعك. الآن لديك سيطرة كاملة على مشروعك.

تشغيل حالة Git على مشروعك بعد تشغيل إخراج الغزل يُظهر الملفات والدلائل المتأثرة:

حالة بوابة $
التغييرات التي لم يتم تنظيمها للالتزام:
 تعديل: package.json
الملفات غير المقتبسة:
 التكوين /
 مخطوطات /

قم بتنفيذ هذه التغييرات وكنت على استعداد لتهيئة CSS Modules.

وحدات CSS

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

لم يعد علينا التفكير في هذا بشكل مكثف حول CSS.

دعنا نقفز مباشرة ونصل إلى تثبيت CSS Modules؟

تثبيت وحدات CSS

محظوظ لنا! اتضح أن المشروع الذي تم إنشاؤه عن طريق إخراج من CRA يشمل جميع وحدات العقدة التي نحتاج إليها لتشغيل وحدات CSS في Webpack. لا نحتاج إلى تثبيت أي تبعيات إضافية!

تكوين وحدات CSS

ابحث عن قسم css-loader في Webpack dev config (config / webpack.config.dev.js: 186 وقت كتابة هذا التقرير) وقم بتغيير جزء الخيارات كما يلي:

// قبل
{
  loader: require.resolve ('css-loader') ،
  خيارات: {
    importLoaders: 1 ،
  }،
}،
// بعد
{
  loader: require.resolve ('css-loader') ،
  خيارات: {
    importLoaders: 1 ،
    وحدات: صحيح ،
    localIdentName: "[name] __ [local] ___ [hash: base64: 5]"
  }،
}،

قم بنفس الشيء في تهيئة إنتاج Webpack (config / webpack.config.prod.js: 191):

// قبل
{
  loader: require.resolve ('css-loader') ،
  خيارات: {
    importLoaders: 1 ،
    تقليل: صحيح ،
    sourceMap: صحيح ،
   }،
}،
// بعد
{
  loader: require.resolve ('css-loader') ،
  خيارات: {
    importLoaders: 1 ،
    وحدات: صحيح ،
    تقليل: صحيح ،
    sourceMap: صحيح ،
   }،
}،

ملاحظة: يمكنك ترك localIdentName خارج تكوين الإنتاج وستحصل على تنسيق اسم الفئة الافتراضي الذي هو مجرد قبيح [hash: base64].

وهذا كل شيء!

إذا قمت بتشغيل الغزل ، فستشاهد الآن أن تطبيقك أصبح الآن غير منضبط تمامًا. من المفارقات أن هذا يعني عملها.

قم بتحديث classNames الخاص بك لاستخدام CSS Modules

يبدو تطبيقك وحشيًا للغاية لأنك الآن مضطر بالفعل إلى استخدام CSS Modules في مكوناتك. للبدء ، ما عليك سوى فتح مكوناتك وإجراء بعض التغييرات:

  1. قم بتعيين أوراق أنماط مستوردة إلى أنماط استيراد ثابتة محلية من "./SomeComponent.css".
  2. يستبدل سلاسل className في JSX بفهارس الكائن className = {styles.myClass}.
  3. لا تسمح وحدات CSS بعلامات ("-") في أسماء الفصول الدراسية ، لذا سيتعين عليك تحديث أي فصول تستخدم شرطة. سيتعين عليك إجراء هذا التغيير في CSS وفي JSX ، ولكن هناك ميزة لطيفة تتمثل في أن أسماء فصلك ستكون أكثر بساطة - يصبح .App-header مجرد رأس. على سبيل المثال.

إليك ما يبدو عليه مكون التطبيق src / App.jsx:

قبل وحدات CSS:

import React، {Component} from 'react'؛
استيراد الشعار من './logo.svg' ؛
استيراد "./App.css" ؛
الطبقة التطبيق يمتد المكون {
  يجعل() {
    إرجاع (
      
        
          logo           

مرحبًا بك في React

                 

          للبدء ، قم بتحرير src / App.js وحفظه لإعادة التحميل.                     )؛   } }

التطبيق الافتراضي للتصدير ؛

بعد وحدات CSS:

import React، {Component} from 'react'؛
استيراد الشعار من './logo.svg' ؛
استيراد الأنماط من './App.css' ؛
الطبقة التطبيق يمتد المكون {
  يجعل() {
    إرجاع (
      
        
          logo           

مرحبًا بك في React

                 

          للبدء ، قم بتحرير src / App.js وحفظه لإعادة التحميل.                     )؛   } }

التطبيق الافتراضي للتصدير ؛

كنت لوحدك الآن

انت انتهيت! لا مزيد من إنشاء تطبيق React. أنت الآن حر في استخدام كل ما تريده من CSS. لقد كبرت الآن.

إذا لم تكن مستعدًا للقذف بعد ، فأنا أعرف طريقة واحدة على الأقل تسمح لك بإضافة دعم CSS Module دون الإخراج. ولكن هذا يضيف تبعية أخرى إلى مشروعك الذي يتعارض مع نقطة الخلاف مع CRA.

آمل أن تكون هذه النصيحة الصغيرة مفيدة لك. أو على الأقل جعلتك أقل خوفًا من الخروج. وبالطبع ، إذا كنت تعرف طريقة أفضل لاستخدام CSS Modules مع تطبيق React React ، فأخبرني في التعليقات!

قراءة متعمقة

  • إنشاء تطبيق React: https://github.com/facebookincubator/create-react-app
  • وحدات CSS: https://glenmaddern.com/articles/css-modules
  • Webpack: https://webpack.github.io/

تم تحديث 5 يوليو 2017 - أمثلة لاستخدام بناء الجملة Webpack 3 التكوين (شكرا توم لاكر وآني بينيل)