CSS Styles and Font Roboto don't load (mdi icons yes) using vuetify loader plugin

Question

I created a fresh app and want to minimize sizes of files, initially without vuetify-loader I have:

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

Test OK, icons and fonts

When using vuetify-loader

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

The js file is smaller but the css don't (is the same). Test not OK, icons OK and fonts NOK In https://vuetifyjs.com/en/customization/a-la-carte/ i read that is necessary to config webpack.config.js to parse .sass files because i don't use Vue CLI (i'm using Laravel with Vuetify but begin from welcome.blade.php) My webpack file is:

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

and resources/sass/app.scss is:

// Fonts

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

// Variables
@import 'variables';

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

Any help would be appreciated

EDIT: Testing the html rendered i found that without loader:

<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>

while with loader:

<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>

but i don't figure out the problem, no errors on npm run prod Seems to be a problem with ccs, some misconfiguration with css or similar...

Answer 1

Try specifying the font in the sass variable

@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;