[개발] Vue 단일 파일 컴포넌트에서 공통 SCSS 불러오기

최근 Vue에 대한 관심이 좀 있어서 이것저것 테스트 해보고 있다. 난 일반적으로 라이브러리, 프레임워크를 공부할 때 이전에 실무에서 고민해봤던 내용들을 주로 테스트 하는데, 만약 Vue 단일 파일 컴포넌트를 사용한다고 가정했을 때 공통 SCSS를 어떻게 처리해야 하는지 궁금했다.

아래 내용은 vue-cli로 생성되는 기본 프로젝트를 사용했다.


Vue 단일 파일 컴포넌트 및 공통 SCSS 정의

vue-cli를 통해 프로젝트를 셋업했다면 다음과 같은 Hello.vue 컴포넌트를 확인할 수 있다.(src/component/Hello.vue)

다른 사항이라면 <style> 태그 안에 있는 내용을 Hello.vue 컴포넌트와 동일한 경로에 Hello.scss를 생성 후 추가하고 이를 불러올 수 있게 변경하였다.

// Hello.vue
<template>
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template>
<style lang="scss" src="./Hello.scss"></style>
Vue 단일 파일 컴포넌트에 대한 자세한 내용은 여기를 확인하자

다음은 모든 컴포넌트에서 사용할 공통 SCSS를 정의했다. 여기에는 색상 정보가 저장된다.(src/styles/variables.scss)

// variables.scss
$color_suny_red: #D60036;
$color_suny_blue: #4B68C5;
$color_warm_red: #EA7F9A;
$color_dark_gray: #494949;
$color_warm_gray: #75746f;
$color_smoke_gray: #DDDDDB;

SCSS 로더 설치 및 등록

다음으로 vue-cli의 기본 webpack 설정에서는 SCSS 로더가 등록되어 있지 않기 때문에 SCSS를 컴파일 할 수 있게 로더를 설치 후 등록해주는 과정이 필요하다.

터미널에서 프로젝트 루트로 들어간 후 다음 명령어를 실행한다.

npm install sass-loader node-sass webpack --save-dev

설치 과정이 종료되면 다음과 같이 webpack.base.conf.js에 해당 로더를 등록하자(build/webpack.base.conf.js)

...
module: {
rules: [
{
test: /.s[a|c]ss$/,
loader: 'style!css!sass'
},
...

위 과정이 완료 되었다면 이제 webpack은 빌드 시 마다 SCSS를 자동으로 컴파일한다. 하지만 공통 SCSS의 경로가 변경될 수 있기 때문에 다음과 같이 미리 alias를 등록했다.

resolve: {
alias: {
'styles': resolve('src/style/')
}
},

공통 SCSS 설정 및 확인

이제 마지막 단계만 남았다. 처음에 만든 Hello.scss 파일에서 @import 명령을 사용해 다음과 같이 공통 SCSS를 불러올 수 있다.

@import "styles/common.scss";
h1, h2 {
font-weight: normal;
font-size: 14px;
color: $color_dark_gray;
}
a {
color: $color_warm_red;
}

끝.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.