Nuxt.js에서 컴포넌트의 CSS자산을 관리하는 방법

css: [
	'~assets/css/common.scss'
],

Nuxt.js 환경에서 개발을 진행하다 보면 컴포넌트 또는 글로벌 요소의 css를 수정해야 하는 경우가 있다. 이러한 상황에서 하나의 파일로 구성된 글로벌 css파일은 여러 문제를 발생시키게 된다.

 

1. 클래스나 상속등의 문제로 이슈가 발생했을 경우 이를 고치기 어렵다(각기 다른 css코드가 문제를 일으킬때가 있기 때문)
2. 글로벌 요소의 특성상 단일 클래스에서 상속을 통해 코드를 작성하는데 이로인해 가독성이 떨어진다.

자산 로드 속도등의 문제는 뒤로하고, 개발단계에서 발생하는 문제만 봐도 꽤나 심각한것을 알 수 있다. 이를 방지하기 위해서는 요소별 css를 모듈화시켜 사용해야 하는데, 이를 개발하는 과정에 있어 필자가 사용한 방식을 소개해보도록 하겠다.

 

SASS의 도입

Nuxt 프로젝트에서 sass를 사용하기 위해서 npm 패키지인 'nuxt-sass-resources-loader'와 'sass-loader'를 설치했다. 설치 방법은 아래 블로그를 참고했다.

Vue의 NUXT에서 SASS를 적용해서 사용하는 방법(feat. BULMA)

이와같은 패키지를 설치한 후, vue page에서 scss를 사용하기 위해 아래와 같은 마크업을 작성했다.

<style scoped lang="scss">
  @import '~assets/css/common.scss';
  @import '~assets/css/index.css';
  @import '~assets/css/mobile/index.css';
</style>

하지만 scss를 import해서 사용하는데 있어 이슈가 발생했다. 해당 scss는 글로벌 요소뿐만 아니라 컴포넌트들의 css도 포함하고 있어 컴포넌트 파일에서 해당 방식대로 scss를 불러오고 있었는데, 컴포넌트를 불러오는 페이지의 경우 컴포넌트와 페이지. 두개의 vue파일에서 scss를 import하고 있어 이를 배제해야 하는 상황에 적합하지 않았다.

 

이에 대한 해결법으로 nuxt.config.js에서 글로벌 css를 불러오는 방식으로 변경하였다.

css: [
  '~assets/css/common.scss'
],

 

 

SCSS파일 모듈화

글로벌 스타일로 사용중인 common.css의 코드를 요약하자면 아래와 같다.

$border: #cecece;
$main: #ff4e54;
$gray: #7b7b7b;

@font-face {
  font-family: notoKr;
  src: local("../lib/font/NotoSansKR-Regular.otf");
}

body {
  margin: 0%;
  color: $def;
  font-family: notoKr, sans-serif !important;
  font-size: 16px;
}

p {
  font-size: 16px;
  margin-top: 0px;
  margin-bottom: 3px;
}

h2 {
  font-size: 20px;
}

h1 {
  font-size: 24px;
}

input {
  min-height: 30px;
}

button {
  min-height: 34px;
}

// Gnb
@import "ui/gnb";

// Snb
@import "ui/snb";

// Forms
@import "ui/forms";

// Small list
@import "ui/smlist";

// Article
@import "ui/article";

// Paging
@import "ui/paging";

// Liner
@import "ui/liner";

// Breadcrumb
@import "ui/breadcrumb";

// Footer
@import "ui/footer";

전체 페이지에 공통적으로 적용되는 태그인 p, h1, button등에 대한 css를 선언했고 글로벌 요소들에 대한 css는 ui폴더에 담아 모듈화시켰다. 이러한 구조를 사용함으로 인해 코드의 가독성이 비약적으로 상승했으며 모듈화로 인해 새로운 요소가 생길 경우 ui폴더에서 작성해 import만 시키면 되기때문에 코드를 관리하는것이 편리해졌다.

프론트엔드를 개발하는 과정에 있어서 기존에는 생각하지 못했던 이슈가 발생하거나 새로운 컴포넌트등이 추가되는 일이 생각보다 자주 발생한다. 그럴때를 대비하여 css를 모듈화시켜 개발하면 코드 추가 및 수정에 유연하게 대처할 수 있고 이슈 발생의 가능성또한 떨어지게 된다. 물론 오버엔지니어링은 유지보수 차원에 있어서 오히려 독이 될수도 있지만 적당한 수준의 모듈화는 업무 능률의 상승을 기대할 수 있을것이다.