[Vue.js & Scss] Vue Cli에서 Scss 사용하기.

Vue Cli에서 Scss 사용하는 방법

 

1. npm 모듈 sass & sass-loader 설치

npm install sass
npm install sass-loader@10

 

2. 전역 설정

Scss를 사용해봤다면 알겠지만, 자주사용하는 속성값을 담아두는 변수(variable), 스타일 재사용을 위한 mixin, reset.scss 같은 것을 담아주는 Scss파일은 별도로 따로 만들어서 관리한다.

 

이를 Vue 컴포넌트 전역에 import 해올 수 있게 전역 설정을 처리해두면 편하다. 전역 설정은 vue cli 설치시 자동으로 생성되는 vue.config.js에서 확인 할 수 있다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  css: {
    loaderOptions: {
      sass: {
        data: ` @import "@/assets/scss/_var.scss"; `,
      }
    }
  }
})

* Vue CLI 3.x 버전에서 vue.config.js 파일에 SCSS 로더 옵션을 정의하는 방법이다.

 

 

3. Vue 컴포넌트 내에서 Scss 사용하기

 

위의 과정을 거쳤다면 Scss를 사용할 수 있는 환경이 마련되었고, _var.scss와 같은 전역에서 사용하는 파일을 import해오는 환경을 구축했기때문에 <style>에 lang="scss" 를 추가해준다면 Scss를 사용할 수 있는 모든 환경이 마련됐다.

<template>
  <h1>화면단입니다.</h1>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style scoped lang="scss">
    body {
    	background-color: $black;
    }
</style>

 

컴포넌트내부에 Scss를 작성하는 것이 아닌 별도로 파일을 만들어 관리하고싶다면  아래와같이 해당 컴포넌트의 스타일을 작성한 파일을 import해오면 된다.

 

<template>
  <h1>화면단입니다.</h1>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style scoped lang="scss">
    @import "../assets/scss/_my-conponent.scss";
</style>