Vue3+Vite项目中导入vuetify.min.css无效果是否正常？

• 核心原因：你导入的vuetify/dist/vuetify.min.css是Vuetify 2的全局样式文件，Vuetify 3完全不需要这个文件，这就是删不删都没变化的根本原因。Vuetify 3采用了全新的样式体系，和Vue2时代的实现逻辑完全不同，和Vite/Webpack的打包工具无关。

第一步：清理无效代码 #

直接移除main.js里的这行无用代码：

import 'vuetify/dist/vuetify.min.css' 

第二步：实现选中状态的primary背景色 #

在Vuetify 3里，无需依赖旧的全局CSS类，通过以下方式实现需求：

1. 内置组件原生支持（以表单组件为例） #

像v-select、v-checkbox这类官方组件，直接通过color属性指定主题色，选中状态会自动应用对应颜色的样式：

<v-select color="primary" :items="['选项1', '选项2']" />
<v-checkbox color="primary" label="选择我" />

2. 自定义元素或组件 #

如果是自定义元素需要设置primary背景，有两种便捷方式：

• 使用Vuetify提供的工具类：

  <div class="bg-primary text-white p-2">
    该元素背景为primary主题色
  </div>
  

• 绑定Vuetify自动注入的CSS变量（主题色已转为全局CSS变量）：

  <div :style="{ backgroundColor: 'var(--v-primary-base)' }">
    背景色为你配置的primary值
  </div>
  

第三步：确认Vite配置正确性 #

你当前的vite.config.js配置是没问题的，vite-plugin-vuetify插件已经自动处理了Vuetify样式的按需导入和主题注入，不需要额外修改CSS相关配置。

补充说明 #

Vue2的Vuetify基于全局CSS类实现样式，导入vuetify.min.css后会加载所有全局样式类；而Vuetify3采用按需组件导入+CSS变量的方案，基础样式通过import 'vuetify/styles'导入，主题色通过配置自动注入到全局CSS变量中，旧的全局样式文件和新体系不兼容，因此导入后无任何效果。

内容的提问来源于stack exchange，提问作者Ymasuu