كيفية إضافة SASS / SCSS إلى مشروع إنشاء رد فعل التطبيق

(ملاحظة: أحدث إصدار من create-react-app يحتوي على دعم SASS مدمج وهذا الدليل ليس ضروريًا.)

يشرح هذا كيفية إضافة المحول البرمجي المسبق SASS / SCSS إلى مشروع إنشاء تطبيق رد فعل موجود. سيعمل هذا مع الصيغ العادية أو Typescript لتطبيق create-react-app ، ويجب أن يعمل بصرف النظر عن الصيغ العديدة في صيغة تهيئة webpack الموجودة هناك.

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

npm المدى طرد

تثبيت ساس
يتم تشغيل المحول البرمجي المسبق SASS في وقت البناء وليس في وقت التشغيل ، وبالتالي فإننا نحفظه مع مفتاح save-dev.

npm تثبيت sass-loader node-sass --save-dev

تحرير Webpack التكوين
أنت بصدد فتح ملف تهيئة dev الخاص بك وتحديد موقع كتلة قاعدة css الحالية وتكرارها واستخدامها كمرجع لإنشاء كتلة جديدة لقاعدة scss. اترك قاعدة css الموجودة هناك كما هي حتى يعمل مشروعك مع كل من SCSS وملفات CSS العادية.

ابحث عن ملف config / webpack.config.dev.js. ابحث عن كتلة المادة المغلق. سوف يبدو مثل هذا ولكن ليس بالضبط:

{
  اختبار: / \ .css/
  استعمال: [
    {
      محمل: require.resolve ('نمط محمل') ،
    }،
    {
      loader: require.resolve ('css-loader') ،
      خيارات: {
        importLoaders: 1 ،
      }
    }،
    {
      اللودر: require.resolve ('postcss-loader') ،
      خيارات: {
        ident: 'postcss' ،
        الإضافات: () => [
          تتطلب ( 'postcss-flexbugs-إصلاحات')،
          autoprefixer ({
            المتصفحات: [
              '> 1٪'،
              "آخر 4 إصدارات" ،
              "Firefox ESR" ،
              "ليس أي <9" ،
            ]،
            فليكس بوكس: "لا 2009" ،
          })،
        ]،
      }،
    }،
  ]
}،

قم بنسخ وتكرار الكتلة بأكملها وإضافتها مباشرة (قبل) كتلة css الحالية. قم بتحرير قيمة "الاختبار" الجديدة لجعلها scss:

{
  اختبار: / \ .scss$/ ،

أدخل قسم sass-loader في منتصف القاعدة الجديدة مباشرة بعد قسم css-loader. تقوم بإدخال الأسطر الثلاثة في الوسط أدناه. ستبدو قاعدة scss الجديدة مثل هذا ولكن ليس بالضبط:

{
  اختبار: / \ .scss$/ ،
  استعمال: [
    {
      محمل: require.resolve ('نمط محمل') ،
    }،
    {
      loader: require.resolve ('css-loader') ،
      خيارات: {
        importLoaders: 1 ،
      }
    }،
    {
      اللودر: require.resolve ('sass-loader') ،
    }،
    {
      اللودر: require.resolve ('postcss-loader') ،
      خيارات: {
        ident: 'postcss' ،
        الإضافات: () => [
          تتطلب ( 'postcss-flexbugs-إصلاحات')،
          autoprefixer ({
            المتصفحات: [
              '> 1٪'،
              "آخر 4 إصدارات" ،
              "Firefox ESR" ،
              "ليس أي <9" ،
            ]،
            فليكس بوكس: "لا 2009" ،
          })،
        ]،
      }،
    }،
  ]
}،

قد يبدو من الغريب أن يكون لديك "css-loader" داخل قاعدة scss ، لكن من الضروري أن تتعامل webpack مع css المترجمة بشكل صحيح بعد تجميعها بواسطة scss.

تحرير Webpack التكوين ل Prod
قم بنفس الإجراء "تحرير Webpack Config" مرة أخرى من أجل ملف config / webpack.config.prod.js. ستبدو كتلة CSS الحالية مختلفة بعض الشيء في ملف prod لكن الإجراء هو نفسه في الأساس. اتبع الأنماط الموجودة في قاعدة css وستكون بخير.

الآن يجب أن يكون لديك قاعدة scss وقاعدة css في كل ملف config. لا يوجد شيء خاص يمكن القيام به الآن سوى إنشاء ملفات SCSS بدلاً من CSS. يمكنك اختيارياً ترك ملفات CSS القديمة في مشروعك وسيتم دمجها مع SCSS لأن لديك قواعد لكليهما!