دستور npm eject برای react

react
reactjs

#1

سلام
دارم یه پروژه با react انجام میدم و یواش یواش دارم یاد میگیرمش
یه مشکلی پیش اومده اونم اینه که من میخوام از css module استفاده کنم. به این صورت هست که هر component فایل css خودشو داره و اسم ها قاطی نمیشن چون خودش میاد و برای کلاس های هر component اسم های منحصر به فرد ایجاد میکنه که خوب این برای من فوق العادست!
فقط مشکل این جاست برای استفاده از این قابلیت حتما باید eject کنم و میترسم بعدش به مشکل بر بخورم و گیر کنم توش!
مخصوصا این که اصلا آشنایی با babbel و webpack ندارم و میترسم نتونم config اش کنم!
حالا سوالی که از شما دارم اینه که با توجه به چیزایی که گفتم پیشنهاد میکنید eject بکنم یا نه؟ به مشکل بر نمیخورم؟ با توجه به این که از webpack و babbel چیز زیادی نمیدونم؟


#2

سلام
معمولا eject میکنن که این تغییرات رو توی کانفیگ بدن. نه مشکلی پیش نمیاد. شما با خیال راحت eject کن و تغییرات رو بده. توفیق اجباری میشه که یکم وب پک یاد بگیری


#3

سلام
eject بکنی دیگه نمیتونی به حالت قبل برگردونی مگر با بکاپ . ولی از create-react-app اگر استفاده کرده باشی همه تنظیمات وب پک رو انجام داده فقط با اضافه کردن چند خط به اون css module فعال میشه


#4

الآن متوجه نشدم
یعنی بدون eject میتونم این کارو بکنم؟ یا باید eject کنم؟


#5

نه . eject که باید انجام بشه . فقط گفتم اگر پروژه رو با create-react-app درست میکردی دردسر تنظیمات وب پک رو نداشتی . ولی در هر صورت باید eject بکنی تا بتونی از css module استفاده بکنی


#6

فکر کنم همینجوری ایجاد کردم
یعنی الآن به فنا نمیرم eject کنم؟؟
چون الآن خودش همه کارارو انجام میده ولی بعدش همه چی با خودمه :wink:


#7

قبل از هر کاری بکاپ بگیر . مشکلی پیش نمیاد


#8

سلام
راه حلشو پیدا کردم
اینجا میزارم که اگه کس دیگه ای به این مشکل برخورد بتونه بدون eject مشکلشو حل کنه
اول از همه ورژن create-react-app رو با دستور زیر چک کنید

create-react-app --version

اگر از 2 پایین تر بود با این دستور آپدیت کنید:

yarn upgrade react-scripts@latest

حالا فقط کافیه فایل css ای که میسازید آخرش با .module تموم بشه
برای مثال

// Login.module.css
.red {
  color: red;
}

// Login.js
import React, { Component } from 'react';

import styles from './Login.module.css';

class Login extends Component {

  render() {
    return(
        <div>
          <h2 className={styles.red} >
          Login Page
          </h2>
        </div>
    );
  }
}

export default Login;

منبع: