[Vue] style 적용 안되는 문제

깨미·2021년 9월 8일
0

vue.js

목록 보기
4/4
post-thumbnail

처음 프로젝트를 만들고 App bar 부터 만들기 시작했다.
그런데 시작부터 문제가 생겼다 😑

v-app-bar를 쓰고 나서 v-toolbar-title에 uppercase를 적용하기 위해 class="text-uppercase" 를 사용했지만 전혀 먹히지 않았다. 그래서 이거 왜이래 !! 하고 다른 style도 적용해보았지만 어떠한 변화도 없음 😠 css를 따로 만들어 color 라든지 size 라든지 정의해놓고 class에 적용해보았지만 안된다 ㅠㅠㅠㅠ

이전 프로젝트에서는 잘만 되던게 왜 안되냐 하고 이전 코드와 비교해보았는데 제일 상위 vue인 App.vue에서 <v-app> tag를 사용하지 않았던 것 🙄 vue 개발을 시작한지 한달이나 지났는데 기본적인 tag 조차 익히지 않고 그저 개발에만 눈이 멀었던 거 같다.. 😵
이번 일을 계기로 정말 처음부터 차근 차근 단계를 밟아나가야 겠다고 느꼈다.

전체 코드

App.vue

<template>
  <v-app>
    <app-bar />
  </v-app>
</template>

<script>
import AppBar from "../src/components/AppBar.vue";
export default {
  name: "App",
  components: {
    AppBar,
  },
};
</script>

AppBar.vue

<template>
  <div>
    <v-app-bar flat>
      <v-toolbar-title class="text-uppercase font-weight-bold"
        >AppBar</v-toolbar-title
      >
    </v-app-bar>
  </div>
</template>
profile
vis ta vie

0개의 댓글