Question

我使用v-text-field和v-select，使用vue-loader 我试图改变字体大小，但我不能。如何更改字体大小？

我的代码喜欢这个。

<template lang="pug">
p label-1
v-text-field(...)

p label-1
v-text-field(...)
</template>

<stylelang="sass">
.input-group .input-group__input
  font-size: 12px !important
</style>

<stylelang="sass"scoped>
.p
  font-size: 12px
</style>

developer tool screenshot

Answer 1

要在应用程序范围内更改单个组件（例如text field）的字体大小：

<style>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

要在另一个组件中更改字体大小，请使用范围限定的样式：

<style scoped>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

对于更通用的方法，您还可以使用.v-input

定位多种组件类型

.v-input {
    font-size: 1.2em;
}

或

.v-input input {
    font-size: 1.2em;
}

最后，您还可以定位标签。

.v-input .v-label {
    font-size: 1.2em;
}

Answer 2

您可以在src目录中创建一个名为sass，scss或styles的文件夹，其中包含名为variables.scss或variables.sass的文件。并将scss变量$ input-font-size：12px添加到变量文件中。 vuetify-loader将自动将您的变量引导至Vue CLI的编译过程，从而覆盖框架默认值。

$font-size-root: 14px;
$input-font-size: 14px;

Here，您可以找到详细信息。

Here，您可以找到变量文件的示例。

Answer 3

在body上设置font-family。如果要导入Vuetify手写笔条目，main.styl将覆盖$ font-family变量。

Answer 4

这个例子对我有用：

echo $VARIABLE_NAME

Answer 5

或者你可以创建一个div类并指出它。

<style lang="stylus" scoped>
  .element
    color white    
    padding 0
    margin 0
    font-size 150%
</style>

.element
      | 一共 : {{ sum("quantity") }} ，....

Answer 6

使用星号选择器 swarmMode = true 匹配元素或组件的所有后代，然后应用如下字体大小：

然后

.font-class-name * {
   font-size: 14px;
}

希望这有效。

如何在vuetify组件中更改font-size

6 个答案: