如何使用 typescript 在 vue.js 中定义自定义主题？答案

【问题标题】：How to define custom themes in vue.js using typescript?如何使用 typescript 在 vue.js 中定义自定义主题？
【发布时间】：2021-10-06 06:16:24
【问题描述】：

我正在尝试更改我正在使用的 Vue 模板（使用 vuetify）的颜色，但是在翻阅文档一天后，我不确定我还能尝试什么。

我的主文件：

//src/main.ts

import '@babel/polyfill';
// Import Component hooks before component definitions
import './component-hooks';
import Vue from 'vue';
import './plugins/vuetify';
import './plugins/vee-validate';
import App from './App.vue';
import router from './router';
import store from '@/store';
import './registerServiceWorker';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

vuetify 插件文件：

//src/plugins/vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify, {
  theme: {
      themes: {
          light: {
            primary: '#17242d', 
          },
          dark: {
            primary: '#17242d',
        },
      },
    },
});

我尝试了在 vuetify.ts 文件中定义不同主题的多种变体，但没有任何改变引用（例如）“主要”的任何组件的颜色。

其他人似乎对我的方法取得了成功：https://forum.vuejs.org/t/vuetify-how-to-add-a-custom-color-theme-after-create-the-project/40241/2

我错过了什么吗？接下来我应该看哪里？

编辑 1：删除了 main.ts 中对 vuetify.min.css 的引用。现在我可以在几毫秒内看到我选择的颜色，然后它会在服务器重启后切换回默认值。

编辑 2：使用网络检查器，我可以发现原色附加了 !important （据我了解，这意味着该定义取代了所有其他定义）。我怎么知道这个定义在哪里？

【问题讨论】：

标签： javascript typescript vue.js vuetify.js

【解决方案1】：

与其从 main.ts 中的 node_modules 导入 Vuetify，不如从插件文件夹中导入文件。

所以在你的main.ts 中而不是

import Vuetify from 'vuetify';

试试这个

import './src/plugins/vuetify.ts';

【讨论】：

我实施了您的更改。现在我可以在几毫秒内看到我想要的颜色，但它会切换回原色
最初我的回答有点错误。您应该 - 在任何情况下 - 避免导入缩小的 vuetify css。 Vuetify css（捆绑）使用 !important 选项设置原色。但是，在开发模式下，因此在非捆绑版本中，它始终设置为默认值，因此您可以对其进行验证。也就是说 - 不要单独导入 css 文件。

【解决方案2】：

//src/plugins/vuetify.ts
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#17242d",
      },
      dark: {
        primary: "#17242d",
      },
    },
  },
});

//src/main.ts
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

Repo 与 demo

【讨论】：