【问题标题】:Setting global body font size does not work设置全局正文字体大小不起作用
【发布时间】:2019-03-15 07:55:55
【问题描述】:
  • 堆栈:Nuxt.js + Vuetify.js
  • 问题:设置全局正文字体大小不起作用
  • 尝试: 在 ~/assets/style/app.styl 中,我将正文字体大小设置为 40px:

    // Import Vuetify styling                                                                                                                        
    $body-font-size = 40px;                                                                                                                          
    @require '~vuetify/src/stylus/app.styl'                                                                                            
    
  • 输出:不生效:

  • 注意:@body-font-weight 也会发生同样的事情

  • 问题:为什么会发生这种情况以及如何克服它?

  • 复制链接:here

【问题讨论】:

  • 你是如何使用这个变量的?
  • 我不使用它。 Vuetify 使用它是因为设置它后跟 @require 指令应该覆盖与此键相关的 Vuetify 默认值。
  • 尝试设置important 这样$body-font-size = 40px !important;
  • 在这个级别,恕我直言,我们不需要指定,但是我尝试过,但它不起作用。谢谢你的建议
  • “复制链接:” - 我想你的意思是链接去下载这个然后去设置一个合适的环境来测试这个......是的,不,对不起.在某处提供一个活生生的例子,而不是期望这里的每个人都经历这个过程。

标签: javascript css vue.js vuetify.js nuxt.js


【解决方案1】:

这是因为您使用的是 vuetify 加载程序插件。所以你改变的变量应该进入变量文件,而不是 app.styl

所以你的assets/style/variables.styl 应该是这样的:

$font-size-root = 40px;                                                                                                                          
@require '~vuetify/src/stylus/settings/_variables.styl'

【讨论】:

  • 我试过你的建议,但没有生效。请注意,当我在 assets/style/app.styl 中定义 @body-font-family 时,它会生效(但其他任何内容都不会)。谢谢
  • @Begueradj 还有什么其他东西?我已经检查过,vuetify 中没有 body-font-size,它被称为 $font-size-root 这就是它不工作的原因
猜你喜欢
  • 2013-10-03
  • 2023-03-17
  • 1970-01-01
  • 1970-01-01
  • 2014-09-23
  • 2010-10-27
  • 2017-09-04
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多