#4 - SCSS 삽입 - Import

SCSS 가져오기

HTML에 SCSS 삽입하기

<!-- link tag 활용하기 -->
<link rel="stylesheet" href="./main.scss">

SCSS에 SCSS 삽입하기

/* @import "경로" */
@import "./main.scss";

 

---

가져오기 파일

@Import를 사용할 시, 파일 확장자를 생략했을 경우 아래 4가지 파일을 검색하여 파일을 적용한다.

파일이 여러개 검색 되는 경우 에러가 발생한다.

 

/* 확장자를 생략했을 경우 아래 4가지 파일을 검색하여 적용 */
@import "main";

@import "main.scss";
@import "main.sass";
@import "_main.scss";
@import "_main.sass";

SCSS 여러개 가져오기

@import "main", "sub";

 

---

SCSS 파일 분할 및 CSS 병합

파일 이름 앞에 _를 붙이면 기준 문서에 병합되어 CSS가 생성된다.

main 파일에서 sub1, sub2 파일을 import했을 경우, 언더바 유무에 따라 컴파일 결과가 아래와 같이 달라진다.

 

케이스	컴파일 전	컴파일	컴파일 후
1	main.scss sub1.scss sub2.scss	>	main.css sub1.css sub2.css
2	main.scss _sub1.scss _sub2.scss		main.scss (sub파일이 main 파일에 병합 됨)