react/ 빌드 전후 css 꼬임 (해결)

# 문제

빌드전 npm start로 로컬서버를 돌렸을때 UI

빌드전 해당 div태그의 css

빌드 후 static파일에서의 UI

빌드후 해당 div태그의 css

 

보다시피 display : flex속성이 빌드전후로 없어졌다.

 

이렇게 static파일에서 main.css를 다 뒤져서 찾아냈다..ㅡㅡ

 

처음엔 scss를 적용안해서 그런가 했는데 요즘은 scss다 쓰지도 않고 

 

css nesting을 native css에서 지원을 하니 그냥 native css에서 css nesting으로 코드를 짯는데..

 

계속 이지랄..

 

이거 고치다가 eslint에러도 뜨고 어제 네시간 뒤졌는데 안되서..

 

 

 

# 해결방법(완벽하지 않음)

    .list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px;
      margin-bottom: 5px;
      background-color: #e5e5e5;
      width: 100%;
      border-bottom: 1px solid grey;
      border-top: 1px solid grey;
      & p {
        margin: 0;
      }
    }

해당 .list div태그에서 저기 display : flex부분에

  .lists {
    display: flex !important; 
    flex-direction: column;
    .list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px;
      margin-bottom: 5px;
      background-color: #e5e5e5;
      width: 100%;
      border-bottom: 1px solid grey;
      border-top: 1px solid grey;
      & p {
        margin: 0;
      }
    }

이런식으로 !important를 달아주면 빌드후에도 저 속성이 사라지지 않는다..

이걸 근본적인 해결책이라고 생각할 수 없는게, 단순히 현재 공부 초기단계에서 안맞는 속성을

찾아내서 해당 속성에 !important를 달아줘서 해결했지만

나중에 프로젝트단계에서 복잡해지고 용량이 커지면 이걸 언제 하나하나 찾냐는 말이다..

보통 react는 css를 모듈화해서 한다는데 이렇게 하면 해결이 되려나??

이거땜에 어제 삽질만 계속하고 공부도 못하고 ㅠㅠ

 

해결되면 포스팅 수정할 예정이다..

 

 

 

# 찐 해결방법

문제점은 내가 css를 작성할때 자식요소 적용하는게 빌드시에 최적화할떄 react가 알아서 걸러주는 과정에서 스타일 설정이 빠지는거였음.

npm i sass

sass깔고

css파일을 .scss확장자로 변경, 임포트시 경로명도 scss로 변경

그럼 빌드전후 css꼬이는 현상이 사라진다.

 

 

---

Conclusion

예전에는 css 자식요소로 정해서 작성하는게 안먹혔다. 때문에 sass를 쓰는걸 추천했는데
react를 배울때는 css가 자식요소 스타일 분할적용하는게 가능해졌다고해서 sass는 작별이다 싶었는데
개발환경에서 로컬서버 돌릴때는 문제없다가 build시에 달라지는 문제가 있던것..
vue를 할떄는 css가 패치전이라서 sass를 기본적으로 깔아서 했었는데 이런 문제가 있었구나
그동안 날 몰래 도와주던 sass야 고맙다