리액트 : SCSS , CSS

로빈·2023년 9월 4일

문제발생 :

페이지마다 css를 줬어도, 겹치는 문제가 발생했다..!

문제해결 :

리액트는 결국에 index.html에서 js와 css가 합쳐지기 때문에, css가 겹쳐진다.
따라서 scss를 사용하면 좋다. scss는 sass(문법적으로 개쩌는 스타일 시트)의 문법이다.

scss, css 활용법 :

import "./Login.scss";

등으로 파일을 불러와준다.



최상위 태그를 만들어 Nesting을 활용한다.

.Main {
	.title {
    	color: blue;
    }
}

변수 활용법 :

@mixin flexSort ($justify, $alignItems) {              
	display: flex;
	justify-contents: $justify;                              
	align-items: $alignItems;
}

.info {
	@include flexSort('space-between','center');               
}
profile
프론트엔드 개발자

0개의 댓글