vuetify-loader 不会自动 bootstrap 我的变量

Question

我使用 vue-cli 创建项目并使用安装 vuetify vue-cli。我在我的 src 目录中创建了一个名为 sass 的文件夹，其中包含一个名为 variables.scss.

的文件

文档说 (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.

我的文件：

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"
  }
...

我的 vuetify 没有任何效果 css，怎么了？

Answer 1

全局 Vuetify 变量的自动加载需要使用 vuetify-loader 而不是完整的 Vuetify 包（您似乎在 plugins/vuetify.js 中使用它）。

您的 Vuetify 设置应与此类似：

// 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 */})

但是，最简单的解决方案可能是重新运行 Vuetify 命令 (vue add vuetify)，并为 Use a-la-carte components? 选择 Yes（这是设置 vuetify-loader)。该命令将编辑您的文件并安装所需的依赖项以启用 vuetify-loader.

demo

vuetify-loader 不会自动 bootstrap 我的变量

The vuetify-loader does not automatically bootstrap my variables

sass

vue.js

vuetify.js

vue-cli