使用 vuetify 加载器插件无法加载 CSS 样式和字体 Roboto（mdi 图标是）

Question

我创建了一个新的应用程序并希望最小化文件大小，最初没有 vuetify-loader 我有：

css/app.css    441Kb
js/app.js    821Kb

测试OK，图标和字体

使用 vuetify-loader 时

css/app.css    441Kb
js/app.js    513Kb

js 文件较小，但 css 文件较小（相同）。 测试不正常，图标正常，字体不正常 在https://vuetifyjs.com/en/customization/a-la-carte/ 中，我读到配置 webpack.config.js 以解析 .sass 文件是必要的，因为我不使用 Vue CLI（我使用 Laravel 和 Vuetify，但从welcome.blade.php 开始） 我的 webpack 文件是：

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(),
        ]
});

资源/sass/app.scss 是：

// 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';

任何帮助将不胜感激

编辑： 测试呈现的 html 我发现没有加载器：

<div id="app">
    <div data-app="true" class="v-application v-application--is-ltr theme--light" id="inspire">
        <div class="v-application--wrap">
            <div class="container container--fluid">
                <div class="container">
                    <button type="button" class="v-btn v-btn--contained theme--light v-size--default">
                        <span class="v-btn__content">
                            <i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-pencil theme--light"></i>Edit
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

使用加载器时：

<div id="app">
    <v-app id="inspire">
        <v-container fluid="">
            <div class="container">
                <button type="button" class="v-btn v-btn--contained theme--light v-size--default">
                    <span class="v-btn__content">
                        <i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-pencil theme--light"></i>Edit
                    </span>
                </button>
            </div>
        </v-container>
    </v-app>
</div>

但我不知道问题所在，npm run prod 上没有错误 似乎是 ccs 的问题，css 的一些错误配置或类似的......

Answer 1

尝试在 sass 变量中指定字体

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

$body-font-family: 'Roboto', sans-serif;
$heading-font-family: 'Roboto', sans-serif;

Answer 2

也许是这样

<div id="app" data-app>
    <v-app>
        
    </v-app>
</div>