Vue2+Vuetify项目自定义样式无法覆盖框架样式：导入顺序问题求解

我之前在Vue2结合Vuetify开发项目时，也碰到过完全一样的困扰——自定义样式总是被后加载的Vuetify样式覆盖，调整main.js导入顺序也没效果。下面分享几个亲测有效的解决方案：

方案1：在App.vue的全局样式中先导入Vuetify CSS，再写自定义样式 #

这是最直接解决加载顺序问题的方法，原理是让webpack把Vuetify的样式和你的自定义样式打包在一起，确保自定义样式在代码顺序上靠后，从而覆盖前者。

步骤：

1. 先删除main.js中的import 'vuetify/dist/vuetify.css'语句
2. 修改App.vue的样式部分，先导入Vuetify的CSS，再写你的自定义样式：

<template>
  <v-flex>
    <v-card class="myCard"></v-card>
  </v-flex>
</template>

<style>
/* 先导入Vuetify的基础样式 */
@import 'vuetify/dist/vuetify.css';

.myCard {
  background-color: yellow;
}
</style>

方案2：提升自定义样式的选择器权重 #

如果不想调整导入顺序，也可以通过提高选择器权重来强制覆盖Vuetify的样式。比如把自定义类和Vuetify的原生类结合使用：

/* 选择器权重高于单独的.myCard或.v-card */
.myCard.v-card {
  background-color: yellow;
}

注意：尽量避免使用!important，它会破坏样式的优先级规则，导致后续样式维护困难。

方案3：利用Vuetify主题配置（最推荐） #

Vuetify本身提供了主题自定义功能，直接通过配置来修改组件样式是最符合框架设计的方式，也不会有加载顺序的问题。

修改main.js的Vuetify初始化代码：

import Vue from 'vue';
import Vuetify from 'vuetify';
import App from './Components/App.vue';

Vue.use(Vuetify);

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        // 直接定义card的主题色
        card: '#ffff00', // 黄色
      },
    },
  },
});

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

这样你的v-card会自动应用这个背景色，不需要额外写自定义类。

为什么之前调整main.js导入顺序没用？ #

Vue单文件组件的样式是由vue-loader处理的，webpack会把这些样式打包成单独的chunk或者动态注入到页面的<head>中。即使你调整了main.js的导入顺序，webpack的代码分割、chunk加载逻辑可能还是会让Vuetify的样式后于你的组件样式加载，导致覆盖问题。

内容的提问来源于stack exchange，提问作者George M.