Question

这个问题已经解决了几个小时，无法提出解决方案。我看过其他一些似乎相关的StackOverflow帖子（以及Vuetify docs），但似乎没有任何帮助。首先，我只是想将字体系列从默认的Roboto更改为Avenir。我没有收到控制台错误或服务器错误。

@ / styles / variables.scss

@import "~vuetify/src/styles/styles.sass";
$font-size-root: 14px;

@import "~vuetify/src/styles/settings/variables";
$body-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $main-font comes from my own ./_variables.scss.
$heading-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $title-font comes from my own ./_variables.scss.

@ / plugins / vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    themes: {
      light: {
        primary: '#4A90E2',
        darkPrimary: '#3B73B4',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#a70000',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
        teal: '#64EBC6',
        green: '#7ED321',
        darkGreen: '#4c8f1d',
        lightGrey: 'rgba(0,0,0,0.12)',
        darkGrey: '#4A4A4A',
        textSecondary: 'rgba(0,0,0,0.4)',
      },
    },
  },
  icons: {
    iconfont: 'md',
  },
});

@ / vue.config.js

module.exports = {
  transpileDependencies: [
    'vuetify',
  ],
  configureWebpack: {
    resolve: {
      // alias: {
      //   '~': path.resolve(__dirname, '../frontend/src'),
      // },
      extensions: ['*', '.js', '.vue', '.json'],
    },
  },
  // css: {
  //   loaderOptions: {
  //     scss: {
  //       prependData: '@import "@/styles/main.scss;"',
  //     },
  //   },
  // },
  // chainWebpack: config => {
  //   ['vue-modules', 'vue', 'normal-modules', 'normal'].forEach(match => {
  //     config.module.rule('scss').oneOf(match).use('sass-loader')
  //       .tap(opt => Object.assign(opt, { data: `@import '@/styles/main.scss'; ` }));
  //   });
  // },
};

任何帮助将不胜感激！

Answer 1

在导入Vuetify之前设置所有顶级变量，以使Vuetify不会被覆盖。

在Vuetify之前设置这些变量

const stream = new MediaStream([audioTrack, videoTrack]);

然后$font-size-root: 14px; $body-font-family: 'Avenir Next', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; $heading-font-family: 'Avenir Next', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;，以便您可以覆盖嵌套的值：

import _variables.styl

现在@import '~vuetify/src/stylus/settings/_variables'哈希存在，设置背景

$material-dark

然后，导入$material-dark.background = 'green'，以便创建main.styl类。

Answer 2

发布此问题6分钟后，我在vuetify插件中注释了import 'vuetify/dist/vuetify.min.css行，这似乎已正确使用了我正在寻找的Avenir字体。很经典。希望这对其他人有帮助！

无法覆盖Vuetify 2.1 SASS变量

2 个答案: