The vuetify-loader does not automatically bootstrap my variables - vue.js

Question

I create project using vue-cli and install vuetify using
vue-cli.
I create a folder called sass in my src directory with a file named variables.scss.
Documentation says (https://vuetifyjs.com/en/features/sass-variables/):
The vuetify-loader will automatically bootstrap your variables into
Vue CLI’s compilation process, overwriting the framework defaults.
My files:
src\plugins\vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
src\scss\variables.scss
$body-font-family: Arial, serif;
$border-radius-root: 6px;
$font-size-root: 10px;
src/App.vue
<template>
<v-app>
<v-app-bar app color="primary" dark>
<v-btn>
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<router-view />
</v-main>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
//
}),
};
</script>
src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
new Vue({
router,
store,
vuetify,
render: (h) => h(App),
}).$mount("#app");
package.json
...
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#mdi/font": "5.9.55",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"roboto-fontface": "*",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-cli-plugin-vuetify": "~2.4.5",
"vue-template-compiler": "^2.6.11"
}
...
I don't have any effect for my vuetify css, what's wrong?

Answer 1

The automatic loading of global Vuetify variables requires using vuetify-loader instead of the full bundle of Vuetify (which you appear to be using in plugins/vuetify.js).
Your Vuetify setup should look similar to this:
// plugins/vuetify.js
import Vue from 'vue'
// ❌
//import Vuetify from 'vuetify'
//import 'vuetify/dist/vuetify.min.css'
// ✅
import Vuetify from 'vuetify/lib/framework'
Vue.use(Vuetify)
export default new Vuetify({/* options */})
However, the easiest solution might be to re-run the Vuetify command (vue add vuetify), and choose Yes for Use a-la-carte components? (this is the step that sets up vuetify-loader). The command would edit your files and install the required dependencies to enable vuetify-loader.
demo