时间戳

首页 > 解决方案 > 如何使用 Vuetify 和 Nuxt 覆盖字体粗细

nuxt.js - 如何使用 Vuetify 和 Nuxt 覆盖字体粗细

问题描述

如何使用Vuetify和Nuxtfont-weight覆盖默认预设？

我尝试在我的中添加它，assets/variables.scss但它不起作用：

$font-weights: (
  regular: 900,
);

我的nuxt.config.js文件如下所示：

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  theme: {
    // dark: false,
    themes: {
      light: {},
      dark: {
        primary: colors.blue.darken2,
        accent: colors.grey.darken3,
        secondary: colors.amber.darken3,
        info: colors.teal.lighten1,
        warning: colors.amber.base,
        error: colors.deepOrange.accent4,
        success: colors.green.accent3,
      },
    },
  },
},

标签： nuxt.jsvuetify.js

解决方案

尝试使用此语法对变量进行深度合并：

map-deep-merge(
  (
    'thin': 100,
    'light': 300,
    'regular': 400,
    'medium': 500,
    'bold': 700,
    'black': 900
  ),
  $font-weights
);

此示例直接来自Vuetify 变量搜索工具

您可以选择$vuetify并查看 Vuetify 实例变量及其配置语法的列表。

推荐阅读