[Vuetify, Nuxt] Vuetify의 custom variable 변경하기

vuetify의 디자인들이 대부분 훌륭하지만 마음에 들지 않는 것들이 있다. 예를들면 table에서 너무 과하게 들어가있는 box-shadow와 같은 요소들.

좀 별로지 않은가?

이런 점을 vuetify도 잘 알고 있는지, vuetify의 api 문서 하단에 보면 다음과 같은 것들이 적혀져있다.

 

data-table의 sass variables

미리 변수들을 선언했으니 default 값에서 바꿔서 사용해라는 것 같으니, 한 번 시도해보면..?

안된다

사라지지 않는다. 그러면 document를 한 번 찾아보자.

https://vuetifyjs.com/en/features/sass-variables/

SASS variables

treeShake Option을 true로 변경해주고, (nuxt 기준) nuxt.config.js에 선언된 vuetify options중 customVariables에 작성하라고 한다.

개발하면서 자주 본 파일인데 저기 적힌 The variables you want to modify를 왜 안읽어 봤을까.. 자책하며 box-shadow값을 괴상한걸 넣어보았고, 잘 실행된다! css로 deep-select로 변경하는 경우가 많았는데, 전체에 전부 적용할 때에는 이 방식을 자주 사용해봐야겠다.