TIL | SCSS _(파일 분할)

파일 이름 앞에 _를 붙여 @import로 컴파일시 ~.css파일로 컴파일 되지 않는다.

Sass-App
# ...
  ├─scss
  │  ├─header.scss
  │  ├─side-menu.scss
  │  └─main.scss
  # ...

⬇️

// main.scss
@import "header", "side-menu";

⬇️ 컴파일 후 확인하면 아래와 같이 scss/에 있던 파일들이 css/안에 각 하나씩 파일로 컴파일 된다.

Sass-App
  # ...
  ├─css
  │  ├─header.css
  │  ├─side-menu.css
  │  └─main.css
  ├─scss
  │  ├─header.scss
  │  ├─side-menu.scss
  │  └─main.scss
  # ...

다음 상황에서는 가져올 파일 이름에 _를 붙이겠다.

Sass-App
  # ...
  ├─scss
  │  ├─_header.scss
  │  ├─_side-menu.scss
  │  └─main.scss
  # ...

⬇️

// main.scss
@import "header", "side-menu";

⬇️ 아래처럼 별도의 파일로 컴파일 되지 않고 사용된다.

Sass-App
  # ...
  ├─css
  │  └─main.css  # main + header + side-menu
  ├─scss
  │  ├─header.scss
  │  ├─side-menu.scss
  │  └─main.scss
  # ...