Sass[SCSS] 기초 이론 3 - @import 를 사용해서 다른 scss 파일 불러오기 (파일 분할 Partial)

Sass[SCSS]

 

Sass[SCSS] 기초 3 - @import 를 사용해서 다른 scss 파일 불러오기 (파일 분할 Partial) 를 해보겠습니다.

 

보통 css 파일에서 다른 외부 css 파일을 불러올때는 @import url 을 사용하는데

/* style.css 파일 */
@import url('font.css');

css 최상단에 이런식으로 css 파일을 불러옵니다. (경로가 다를경우 경로에 맞춰서 불러와주면 됨)

마찬가지로 scss 파일에서도 css 외부파일을 불러올때 이런식으로 불러오면 되는데 문제는 scss파일에서 scss파일을 불러올때 입니다.

 

저는 style.scss 라는 테스트 파일 안에서 font.scss 파일을 불러와볼게요.

/* style.scss 파일 */
@import url("font.scss");

/* 컴파일된 style.css 파일 */
@import url("font.scss");

이렇게 불러온 후 컴파일을 하면 컴파일된 style.css에도 똑같이 font.scss 를 불러오게 됩니다.

하지만 저희가 scss를 적용시키려면 컴파일된 css 파일이 불러와져야 하는데 컴파일이 안된 scss 파일을 그대로 불러오기 때문에 적용이 되질 않습니다.

 

그래서 scss 파일에서 scss 파일을 불러올때 사용하는 다른 방식이 있습니다.

바로 url 을 빼고 그냥 @import 다음에 "font" 이런식으로 파일명만 적어주는 겁니다. (경로가 다를경우 경로에 맞춰서 불러와주면 됨)

/* font.scss 파일 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&family=Noto+Serif+KR:wght@200;300;400;500;600;700&display=swap');
html {
  &, body{font-family: "Noto Sans KR", sans-serif;}
}

/* style.scss 파일 */
@import "font"; /* font.scss로 불러오는것과 같음(확장자 생략가능) */

/* 컴파일된 style.css 파일 */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&family=Noto+Serif+KR:wght@200;300;400;500;600;700&display=swap");
html, body {
  font-family: "Noto Sans KR", sans-serif;
}

보시면 font.scss가 style.scss에 임포트되어 컴파일된 style.css 파일에 저렇게 들어가 있는걸 확인할 수 있습니다.

여기서 특이점은 css 파일을 임포트 할때와는 다르게 저렇게 scss 파일을 임포트하면 임포트하는 코드 경로가 가져와지는게 아니고

font.scss 내부에 작성되어 있던 코드들이 전부 style.css에 같이 컴파일되는걸 확인할 수 있습니다.

 

지금 예시로 보여드린건 font,scss 이지만 일반적인 프로젝트를 할때

reset.scss 라던지, common.scss 라던지, layout.scss 라던지 이런 분할 scss 파일을 style.scss에 한번에 이렇게 임포트하는 경우가 많은데

/* style.scss 파일 */
@import "reset";
@import "common";
@import "layout";

 

이러면 컴파일되는 style.css에 저 모든 scss 파일 컴파일된 코드들이 다 한곳으로 모이게 되니까 style.css만 불러와서 css를 적용시켜주면 되는겁니다.

---

여기서 추가로 저희가 작성해서 컴파일할 scss 파일은 결국 style.scss 파일입니다. 나머지 reset, common, layout의 scss 파일들은 import 해서 불러올 뿐이죠.

 

하지만 이럴경우 Live Sass Compiler에서 reset, common, layout의 scss 파일들을 전부 컴파일 해버려서 독립적인 파일이 만들어집니다.

저희가 setting.json에서 따로 컴파일될 파일을 style.scss 하나로 지정해주는 번거로운 설정을 한번 더 해야해요.

 

이런 번거로운 작업을 안하는 방법은 저희가 컴파일을 하지않고 오직 임포트로 가져와서 사용할 scss 파일들은 파일명 앞에 _ (언더바)를 붙혀주면 됩니다.

 

_reset.scss, _common.scss, _layout.scss  이런식으로 말이죠.

파일명 앞에 언더바가 들어가면 컴파일할때 무시됩니다.

 

/* style.scss 파일 */
@import "reset";
@import "common";
@import "layout";

임포트 해올때도 @import 하고 앞에 _ 언더바를 붙혀줄 필요 없이 그대로 이런식으로 임포트해오면 됩니다.