일괄적용 SCSS파일 설정하기
React에서 SCSS를 사용할 때, 특정 스타일을 모든 페이지에 적용시켜려고 할 때,
모든 scss파일 상단에 @import "basicStyle.scss" 을 붙여줘야 한다.
이는 비효율적이고 귀찮은 작업이다.
웹팩 설정파일의 scss 로더 옵션 부분을 수정하여 모든 파일에 임포트를 작성하지 않아도 자동적으로 붙게되는 방법이 있다.
이처럼 옵션의 data 변수에 모든 파일에 일괄적으로 적용되는 scss파일을 저장해 놓으면 된다.
이 설정을 해준 뒤에는 리액트 앱을 재시동 해줘야 한다.
또한 리액트에서 클래스명은 대시(-)를 사용하지 못해서 wrap-box 라는 클래스명은 wrapBox로 저장된다.
그렇지만 css를 작성할 때 클래스명에 대시를 사용하고 싶다면
역시 웹팩 설정파일에서 css 로더 설정부분의 옵션에 camelCase: "dashes"를 추가해주면,
자동으로 리액트에서 대시다음에 오는 글자를 대문자로 바꿔준다.
이를 통해 css에서는 wrap-box 가 리액트 jsx에서는 wrapBox로 변환된다.
SCSS Mixins
믹스인이란 css에서 사용하는 함수를 뜻한다고 보면 된다.
미디어 쿼리를 사용하고자 할 때 이를 믹스인에서 함수로 지정해놓고,
매번 미디어쿼리를 작성하는것이 아니라 미리 정해놓은 함수에 변수만 다르게해서
간편하게 사용하는 방법을 말한다.
예를 들어서 각 디바이스에 따라 다른 스타일을 적용하려고 할 때 미디어 쿼리를 사용하는데
믹스인을 사용하면 다음과 같다
이런식으로 미리 지정해 놓고 다른 스타일 파일에서 $point 변수에 원하는 값을 넣고
@content부분만 오버라이팅 해주면 된다.
이렇게 사용할 수 있다.
믹스인에 미리 함수를 지정해 놓고, 그 함수를 변수만 다르게 해서 사용하는 간편한 방식이다
댓글
댓글 쓰기