Nuxt3 + Vuetify SASS Variable 수정하기

Nuxt3 로 넘어오면서 Vuetify 를 이용하여 개발하면 Vuetify SASS Variable을 수정하여 Vuetify 컴포넌트의 기본스타일을 변경할 수가 있다. Nuxt3에서 이 값을 수정할 수 있도록 설정하는 법을 설명한다.

 

 

Nuxt3 + Vuetify 모듈

Nuxt3와 Vuetify 개발을 위한 모듈 설치 환경은 아래와 같다.

@invictus.codes/nuxt-vuetify 모듈을 이용하면 Nuxt3에서 Vuetify 3.x를 Nuxt 프로젝트에 통합할 수 있다.

 

아래는 Nuxt-Vuetify 모듈 공식 문서이다.

Nuxt-Vuetify 문서

 

package.json

 

{
  "name": "Project",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@invictus.codes/nuxt-vuetify": "^0.2.20",
    "@nuxt/devtools": "latest",
    "@types/node": "^18",
    "nuxt": "^3.5.2",
    "sass": "^1.63.4"
  }
}

추가로 sass 모듈 설치도 필요하다.

 

 

 

 

Sass Variable 파일 생성

보통 Vuetify 컴포넌트의 특정 스타일을 전체적으로 적용되도록 바꾸고 싶을때 SASS 변수를 수정하여 해당 컴포넌트를 사용하는 모든 부분에 적용되도록 한다. SASS 변수값을 재정의 할 파일을 하나 생성한다. 이 파일에 모든 변경할 항목을 넣어줄 것이다.

파일명은 원하는데로 만들면 된다. asset 폴더 밑에 vuetify.sass 라는 파일로 만들었다. 

 

asset/vuetify.sass

@use 'vuetify/settings' with (
  $button-plain-opacity: 1,
);

 

 

 

 

Nuxt 설정

이제는 nuxt 설정을 추가해주면 된다. nuxt.config.ts 파일에 vuetify 속성과 css 속성을 아래와 같이 추가해주면 된다.

 

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@invictus.codes/nuxt-vuetify'],
  
  css: [
    'vuetify/styles'
  ],
  
  vuetify: {
    moduleOptions: {
      styles: { configFile: 'assets/vuetify.scss'}
    }
  }
})

 

여기서 한참 적용을 해도 안되는 상황이 있었는데, 구글링을 하다보니 css 속성에 'vuetify/styles' 를 넣어주면 해결된다는 얘기가 있어서 추가해봤더니 커스터마이징한 SASS 변수값이 바로 적용이 되었다.

그럼 이제 원하는 Vuetify 컴포넌트의 SASS 변수값을 아까 만들어준 vuetify.sass에 추가만 해주면서 개발하면 된다.

 

 

---

 

Nuxt 버전 2에서 3로 넘어오면서 기존의 사용하던 모듈들을 적용하는거 하나하나가 정말 쉽지 않다. 그래도 개발환경에서의 Dev Server 구동 속도때문에 Nuxt 3에서 다시 2로 돌아갈 수가 없다.