vue.js - 谁能解释一下 vuetify 主题代码

Question

谁能解释一下这个主题如何在 vuetify 中工作以将变量动态传递给 scss 并更改主题。即，他们如何将主题值从 vue.js 传递到 scss。或者他们在做什么。请提供以下链接，我可以在其中看到为主题编写的代码，我在他们的 git hub 帐户中查找过，但徒劳无功，我不明白他们在哪里为主题编写代码。

  Vue.use(Vuetify, {
 theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
 }
})

您还可以使用预定义的材质颜色。

import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
 theme: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
 }
         })

我急切地想知道它是什么，它是如何工作的。你们只是我的希望，请帮忙。我想知道核心文件为实现这一目标所做的工作。或者任何人都可以提供编写 theme.js 的确切文件链接

是否可以只运行主题部分？如果是，请让我知道这怎么可能？我非常想学

标签： vue.jsvuetify.js

Answer 1

大部分代码都可以在vuetify/app-theme.js ^{( source )}中找到。从创建的生命周期钩子要么applyTheme被调用，要么this.$ssrContext.head被修改。任何一个都会将生成的 css 添加generatedStyles到页面中，这是一个计算属性，用于解析 vuetify 选项并从中生成样式。这些样式是在vuetify/theme.ts ^{( source )中生成的}