webpack에서 vuetify를 사용하는 방법

vuetify 공식 페이지에도 webpack에의 도입 방법은 기재가 있지만, 조금 수고했기 때문에 메모해 둔다.

기본적으로 vuetify 공식 페이지

webpack으로 vue 프로젝트 만들기

webpack을 사용하여 vue 프로젝트를 시작하는 방법은 여기 이어서 다음을 실행합니다.

패키지 설치

프로덕션 환경용으로 vuetify를, 개발 환경용으로 sass-loader와 deepmerge를 설치한다.

npm install vuetify
npm install sass sass-loader deepmerge -D

webpack.config.js 편집

module 객체의 rules에 다음을 추가한다.

webpack.config.js

  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'style-loader',
          'css-loader',
            {
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                   //indentedSyntax: true
              },
            },
          },
        ],
      },
    ],
  }

참고

위의 설명은 vuetify 공식 페이지에서 주워 왔지만 2 점주의가 필요.

1) version에 의한 선택
2) indentedSyntax: true의 필요 여부

주1 version별 선택

공식 페이지에는 다음과 같이 설명되어 있지만 버전 7 또는 버전 8 중 하나를 선택해야합니다.

{
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },

package.json

    "sass-loader": "^10.0.2",

package.json에서 확인하면 버전은 10x이므로 버전이 새로운 8의 설명만을 남긴다.

주2 indentedSyntax: true의 필요여부

indentedSyntax의 요부는 sacc인지 scss인지로 크게 바뀐다.
여기 설정이 맞지 않으면 개발 서버를 시작할 때 style이 읽을 수 없어 오류가 발생합니다.

· scss
일반 CSS와 마찬가지로 괄호 {}와 세미콜론;이 필요합니다.
문장의 끝과 시작이 명기되어 있으므로 들여쓰기로 판단할 필요가 없다.
indentedSyntax: false(또는 불필요)

・sass
들여쓰기나 개행이 코드의 단락을 나타낸다.

indentedSyntax: true (필수)

src/plugins/vuetify.js 만들기

vuetify.js 파일을 만들고 vuetify를 사용하는 프로세스를 설명합니다.

src/plugins/vuetify.js

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

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

src/index.js 편집

방금 만든 vuetify.js를 index.js로 가져와 Vue 인스턴스로 가져옵니다.

index.js

import Vue from "vue"
import App from "./components/App.vue"
import vuetify from "./plugins/vuetify.js"

const VueApp = Vue.extend(App)

console.log('Hello!')

const app = new VueApp({
  el: '#app',
  vuetify
})

vuetify 검증

App.js 파일에 vuetify 코드를 작성하여 올바르게 반영되는지 확인합니다.

app.vue

<template>
  <div class="app">
    <v-btn dark>Button</v-btn>
    <v-btn color="#F0E68C" fab>tile</v-btn>
    <v-btn dark rounded>rounded</v-btn>
  </div>
</template>

npm run serve 로 브라우저를 기동해, 아래와 같이 표시되면, vuetify가 로드하고 있다.