Closed8

Vue3 + TypeScript + Vuetify3(Alpha) + Vite のプロジェクトを作成したときのメモ

maroKanatanimaroKanatani

Vue3 + TypeScript + Vuetify3(Alpha) + Viteのプロジェクトを作成しようとしたときに色々詰まったのでメモを残しておく。

maroKanatanimaroKanatani

環境

以下がインストールされている前提。

❯ node -v
v15.8.0

❯ yarn -v
1.22.10
maroKanatanimaroKanatani

プロジェクトの作成

Vite公式通りに作成する。
テンプレートはvue-tsを利用する。

yarn create vite my-vue-app --template vue-ts
maroKanatanimaroKanatani

Vuetify3(Alpha)のインストール

こちらもVuetify公式通りインストールを試みる。

❯ vue add vuetify

// presetはPreview (Vuetify 3 + Vite)を選択。
? Choose a preset:
  Default (recommended)
❯ Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  V3 (alpha)
  Configure (advanced)

この状態で起動するとエラーが出ている。

maroKanatanimaroKanatani

エラーの解消

色々とTypeScriptではなくJavaScriptベースの箇所があるので直していく。

  • index.htmlの修正。
index.html
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/main.js"></script>
  • vite.config.jsvite.config.tsが作成されるのでもともとあったvite.config.tsを削除する。
  • デフォルトだとvite.config.jssrc/styles/variables.scssを読み込むようになっているので修正する。(今回は該当部分を削除する。)
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

- import path from 'path'
- const srcPath = path.resolve(__dirname, 'src', 'styles', 'variables.scss')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: { 'process.env': {} },
-  css: {
-    preprocessorOptions: {
-      sass: { additionalData: `@import ${srcPath}\n` },
-      scss: { additionalData: `@import ${srcPath};\n` },
-    },
-  },
  /* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
  resolve: {
    extensions: [
maroKanatanimaroKanatani

↑でsrc/styles/variables.scssの該当部分を削除したが、空のsrc/styles/variables.scssを新規に追加してしまっても良い。(むしろこちらの方が正しいかもしれない)

このスクラップは2021/08/16にクローズされました