[2022.07.14] SCSS @use사용시 변수 안 불러와지는 오류/ 배열에 img src담고 해당 index시 변경될 때 오류/SCSS파일여러개적용시class오류

오류1. scss 작업중 use를 통해 scss파일을 불러오자 변수를 불러올 수 없다고 에러가 뜸

 

해결: import를 통해 불러오자 파일 안에 변수도 똑같이 불러와 적용되어 해결함

@use './index.scss';  =>x
@import './index.scss';  =>o

 

import와 use 차이점 참고 사이트

https://velog.io/@bisari31/import-use-%EC%B0%A8%EC%9D%B4%EC%A0%90

@import @use 차이점

 

---

 

2. 오류 : img src를 배열로 만들어 변수에 담에 img 에 변수가 바뀌면서 해당 이미지가 보일 수 있도록 설정하였으나 오류가남 

 

해결:

-아래 코드와 같이 ./../../img~전체의 src가 아닌 뒤에 변경되는 파일명만 배열에 담음

-바뀌는 변수자체를 넣지 않고 주소 뒤에 변수가 +돼서 들어가도록 설정하자 해결됨

  const ztNtListSrc =['korea.png','china.png','asia_europe.png']

  const ztNtList= [...ztNtListSrc];

  const [ztNtImg,setZtNtImg]=useState(ztNtList[0]);

 <img src={require('./../../img/zeta/network/'+ztNtImg)} alt='d' width="100%"/>

 

---

오류3: SCSS파일에 다른 공통된 SCSS파일을 import시, {}중첩된게 다르다고 해도 클래스가 같으니 똑같이 두개의 파일에 적용되어 스타일이 섞임

 

해결: 해당 SCSS파일(B type)에 적용할 때 다른 SCSS(A type)의 className을 그대로 주지 않고 앞에 큰 div className을 줘서 구분시킴

 

▼ 오리지널 SCSS(A type)에 맞게 클래스 그대로 적용한 것 (X)

.ztNtInner{
  @include Inner;
}

.ztTitle{
  @include Subtitle($sub-title, $basic-gray3);
  color:$basic-black;
  &::after{
    display: none;
  }
}

.ztRedTabBox .ztRedTabInner{
  width: 100%;
  margin: 0;
  padding:0;
  }

 

▼ 해당 SCSS(A type)의 .ztNetWorkBox 클래스를 앞에 붙여 구분시킴 (O)

.ztNetWorkBox .ztNtInner{
  @include Inner;
}

.ztNetWorkBox .ztTitle{
  @include Subtitle($sub-title, $basic-gray3);
  color:$basic-black;
  &::after{
    display: none;
  }
}

.ztNetWorkBox .ztRedTabBox .ztRedTabInner{
  width: 100%;
  margin: 0;
  padding:0;
  }

 

---

 

오류4: 폰트 적용시 한글폰트, 영어폰트 각각 다르게 설정시 오류

해결: 아래 코드와 같이 영어, 한글 순서대로 적자 적용됨

font-family:'Roboto','Noto Sans KR',sans-serif;