사용자 지정 테마 추가 방법 확인

사용자 지정 테마 추가 방법 확인

나는 프로젝트를 만들기 위해 vue cli3를 사용했다.

vue create my-project

내 프로젝트에 부비시(Vuetify)를 더하는 거야

vue add vuetify

테마 생성기를 시각화하여 사용자 지정 테마를 만든 후이제 나는 그 주제를 내 프로젝트에 추가하고 싶다.

뷔에티시 공식 문서에는 다음과 같은 주제가 추가된다.

    Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

하지만 나의main.js이런 모양

import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

여기엔 뷔에티파이라는 것이 없다.그러면 이 프로젝트 설정에 사용자 지정 테마를 추가하려면 어떻게 해야 하는가?

여기서 vue-cli 3을 사용하고 있는 경우 :) 프로젝트를 보십시오. 플러그 인이라는 폴더가 있습니다.

src >> 플러그 인

이 폴더에서 vuetify.js를 찾을 수 있으며, 여기서 설명서에 따라 사용할 테마를 지정할 수 있다.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify, {
    theme: {
        primary: "#f44336",
        secondary: "#e57373",
        accent: "#9c27b0",
        error: "#f44336",
        warning: "#ffeb3b",
        info: "#2196f3",
        success: "#4caf50"
      }
})

참조URL: https://stackoverflow.com/questions/51721114/vuetify-how-to-add-custom-theme