Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue_CLIプロジェクトにViteを導入検討してみた

hatsune
June 16, 2021

 Vue_CLIプロジェクトにViteを導入検討してみた

hatsune

June 16, 2021
Tweet

More Decks by hatsune

Other Decks in Programming

Transcript

  1. Vite:導入してみた(2/10)
 [エラー1] SCSSのグローバル変数が読めていない
 // 導入コマンド → 成功 vue add vite

    // 起動コマンド → 成功 yarn vite // アプリ起動時 → 失敗 11:05:22 [vite] Internal server error: Undefined mixin. ╷ 11 │ @include f-body($fontS); │ ^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/app/components/base/base-form/base-daterangepicker/_base-calendar.scss 11:9 root stylesheet
  2. Vite:導入してみた(3/10)
 [対応1-1] SCSSのグローバル読み込みの設定追加
 const srcPath = path.resolve(__dirname, './src') module.exports =

    { // 変数定義ファイルをグローバルで事前読み込みしておく設定を追加 css: { loaderOptions: { scss: { additionalData: `@import "${srcPath}/styles/_variables.scss";` } } } }
  3. Vite:導入してみた(4/10)
 [対応1-2] Viteの時だけadditionalDataを使うようにする
 
 
 const srcPath = path.resolve(__dirname, './src')

    const IS_VITE_ENV = process.env.npm_lifecycle_event === 'vite' module.exports = { css: { loaderOptions: { scss: { // ViteのときはadditionalData, Vue CLI のときはprependDataを使うようにする [IS_VITE_ENV ? 'additionalData' : 'prependData']: `@import "${srcPath}/styles/_variables.scss";` } } } }
  4. Vite:導入してみた(5/10)
 [エラー2] SCSSの@のエイリアスが読めていない
 // アプリ起動時 → 失敗 (node:67126) UnhandledPromiseRejectionWarning: Error:

    ENOENT: no such file or directory, open '/Users/hatsune.kitajima/working/timecard-frontend/@/styles/variables-sp' at Object.openSync (fs.js:465:3) at Object.readFileSync (fs.js:368:35) at rebaseUrls (/Users/hatsune.kitajima/working/timecard-frontend/node_modules/vite/dist/node/c hunks/dep-cb562f8f.js:19456:33)
  5. Vite:導入してみた(7/10)
 [対応2] ~@を@に修正する
 // sass-loaderの記法?で~@としていたが、これだとViteでエイリアスが読めない(@が文字列として評 価されているっぽい?) @import '~@/styles/variables-sp'; ↓ //

    @に直せばViteでは読めた(ただしこの場合Vue CLIのビルドがこける) @import '@/styles/variables-sp'; ↓ // 両方の環境を動作させるには相対パスで読み込み指定するしかなさそう・・・ @import '../../styles/variables-sp';
  6. Vite:導入してみた(8/10)
 [エラー3] Vuetifyのコンポーネントが読み込めていない
 // アプリ起動時のブラウザのコンソールエラー [Vue warn]: Unknown custom element:

    <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <App> <Root>
  7. まとめ
 • ひとまずアプリ起動まではできた
 • 想像より設定変更が面倒、コード変更も必要
 • 導入には以下の壁が残っている
 ◦ SCSSの~@のエイリアスが読めない
 ◦

    Vuetifyの利用コンポーネントを個別読み込みする必要がある
 ◦ 細かいデザイン崩れがあるので当たってないスタイルがありそう
 • 開発時ビルドは噂どおり爆速
 • プロジェクトによっては即導入する価値はある