Есть ли руководство по настройке Vuetify / Webpack для работы с загрузчиком vuetify?

Question

Я пытаюсь заставить работать Vuetify с помощью Laravel, используя Vuetify Loader / Webpack, чтобы минимизировать размер файлов без удачи. Из оригинальных файлов я лишь немного изменился. В https://vuetifyjs.com/en/customization/a-la-carte/ я прочитал, что необходимо настроить webpack.config. js для анализа файлов .sass, потому что я не использую Vue CLI (я использую Laravel с Vuetify, но начинайте с welcome.blade. php)

webpackpack.mix. js:

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
       plugins: [
            new VuetifyLoaderPlugin(),
        ]
});

resources / js / plugins / vuetify. js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

resources / js / app. js

import './bootstrap';
import Vue from 'vue';
import vuetify from './plugins/vuetify'
import App from './App.vue'

const app = new Vue({
    vuetify,
    el: '#app',
    render: (h) => h(App) 
});

Приложение. vue (из готового макета Baseline)

<template>
  <v-row>
    <v-navigation-drawer
        v-model="drawer"
        app
    >
      <v-list dense>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-contact-mail</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Contact</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar
      app
      color="indigo"
      dark
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>
    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col class="text-center">
            <v-tooltip left>
              <template v-slot:activator="{ on }">
                <v-btn
                  :href="source"
                  icon
                  large
                  target="_blank"
                  v-on="on"
                >
                  <v-icon large>mdi-code-tags</v-icon>
                </v-btn>
              </template>
              <span>Source</span>
            </v-tooltip>

            <v-tooltip right>
              <template v-slot:activator="{ on }">
                <v-btn
                  icon
                  large
                  href="https://codepen.io/johnjleider/pen/zgxeLQ"
                  target="_blank"
                  v-on="on"
                >
                  <v-icon large>mdi-codepen</v-icon>
                </v-btn>
              </template>
              <span>Codepen</span>
            </v-tooltip>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
    <v-footer
      color="indigo"
      app
    >
      <span class="white--text">&copy; 2019</span>
    </v-footer>
  </v-row>
</template>

<script>
  export default {
    props: {
      source: String,
    },
    data: () => ({
      drawer: null,
    }),
  }
</script>

resources / sass / app. js

// Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css');

// Variables
@import 'variables';

// Vuetify
@import '~vuetify/dist/vuetify.min.css'; 

resources / views / welcome.blade. php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>

    <!-- Styles -->
    <link href="{{ asset(mix('css/app.css')) }}" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="{{ asset(mix('js/app.js')) }}"></script>
  </body>
</html>

Я пытаюсь без последней строки также

Поскольку проблема остается, я думаю, что, может быть, я что-то забыл или настроил что-то не так. Затем я пытаюсь начать с этого примера проекта

https://github.com/nekosaur/laravel-vuetify

, изменив только приложение. vue, чтобы использовать готовый макет Baseline с сайта Vuetify. Результат тот же, кажется, что стили отсутствуют ...

неожиданный результат

Ожидаемый результат

Ожидается результат

Кто-нибудь, кто использует Vuetify с загрузчиком и Laravel ??