无法覆盖 Vuetify 2.1 SASS 变量

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

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

Answer 2

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

在 Vuetify 之前设置这些变量

$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.style 以便您可以覆盖嵌套值：

@import '~vuetify/src/stylus/settings/_variables'

现在$material-dark 哈希已经存在，设置背景

$material-dark.background = 'green'

然后，导入 main.style 以便创建 Vuetify CSS 类。