Scss 파일에서 다른 스타일시트 불러오기

CSS의 확장팩 중 하나인 Scss에서는 정말 많은 편의기능을 제공하는데요,

오늘은 여러 기능들 중 다른 Scss 파일을 불러올 수 있는 import 기능에 대해 알아보겠습니다.

components
│
├── Button
│   ├── Button.jsx
│   └── Button.scss
├── Card
│   ├── Card.jsx
│   └── Card.scss
├── Header
│   ├── Header.jsx
│   └── Header.scss
│
├── App.scss
└── App.jsx
...

위의 폴더 구조는 제가 이전에 애용하던 컴포넌트 폴더 구조입니다.

폴더별로 컴포넌트와 스타일 파일을 관리하는 방식은 나쁘지 않지만, scss를 활용한다면 더 멋지게 폴더 구조를 개선할 수 있습니다.

components
│
├── Button.jsx
├── Card.jsx
├── Header.jsx
│
style
│
├── _Button.scss
├── _Card.scss
├── _Header.scss
├── app.scss
│
└── App.jsx

...

각 컴포넌트별 폴더를 관리하는 대신, 컴포넌트와 스타일 폴더를 완전히 분리한 모습입니다.

scss 파일명 앞에 언더바 _ 를 붙여주면 모듈로 활용할 수 있게 되는데요, 이렇게 하면 컴포넌트별로 스타일시트를 불러올 필요가 없습니다.

/* app.scss */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* import 시에는 언더바를 제외한 파일명만을 입력합니다. */
@import "./Header";
@import "./Card";
@import "./Button";

import Header from "./components/Header";
import Card from "./components/Card";
import Button from "./components/Button";
// app.scss를 불러옴으로써 다른 모든 컴포넌트의 스타일을 한번에 불러올 수 있습니다.
import "./styles/app.scss";

function App() {
  return (
    <div className="App">
      <Header />
      <Card />
      <Button />
    </div>
  );
}

export default App;

TL;DR

• Scss의 모듈 기능을 활용하면 스타일 폴더 / 컴포넌트 폴더를 완벽히 분리할 수 있다.
• Scss의 모듈 기능을 활용하면 한 파일을 임포트하는 것만으로 다른 모든 스타일들을 적용할 수 있다.
• Scss 모듈로 사용하고자 하는 파일은 파일명 앞에 언더바 _ 를 붙인다.
• 임포트 시에는 언더바를 제외한 파일명만을 활용한다.