vuetify SASS Variables를 활용한 Style Custom

SASS Variables은 vuetify의 style을 사용자 custom style 형태로 바꾸기 위해 사용한다. 전체적인 컴포넌트의 설정값을 한번에 바꿀 수 있고, spring에서 css파일과 비슷한 개념의 기능이다.

 

 

variables.scss 파일 생성

먼저, vue 프로젝트 내에 sass, scss 혹은 styles 폴더를 만들어서 variables.scss or variables.sass 파일을 생성한다.

그러면 vuetify-loader가 자동으로 이 파일들을 읽어 설정되어 있는 sass 변수들을 오버라이드 즉, 덮어씌운다.

 

폰트 사이즈와 class별 버튼 크기를 설정하였다.

 

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

SASS variables

자세한 설정 내용은 vuetify 공식 홈페이지에 잘 나와있다. 복사 해서 style 값만 변환해주면 된다.

 

[변경전]

[변경후]

변경 전보다 전체적인 폰트 크기가 작아진것을 확인할 수 있다.

 

sass 파일 생성

.pa-17
    padding: 18px !important

padding 값을 18px로 변경하였다.

 

<script>
import HelloWorld from './components/HelloWorld';
import '@/styles/overrides.sass';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

sass 파일을 설정할 경우 App.vue에 경로 설정을 추가적으로 작성해야한다.

 

변경할 컴포넌트를 검색하면 해당 컴포넌트에 대한 설정 값들이 잘 나와있다.

 

https://vuetifyjs.com/en/api/vuetify/

$vuetify API