The vuetify-loader does not automatically bootstrap my variables-CodePudding

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

CodePudding user response：

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