如何为Vuetify部分组件全局添加自定义样式且不产生重复CSS？

方案1：使用Vuetify官方Sass变量覆盖（无重复CSS，符合官方规范） #

你之前自定义的overwrites.scss不生效，是因为没有正确配置到构建工具的Vuetify插件参数中，按如下配置即可生效：

• 若使用Vite构建，修改vite.config.ts配置：

import { defineConfig } from 'vite'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vuetify({
      styles: {
        // 此处路径替换为你项目中overwrites.scss的实际路径
        configFile: 'src/styles/overwrites.scss',
      },
    }),
  ],
})

之后在overwrites.scss中直接修改v-chip对应的内置变量即可，不需要额外写自定义样式，不会产生重复CSS：

// 可根据需求调整数值
$chip-padding: 4px 8px !default;

• 若使用Vue CLI构建，对应修改vue.config.js中的vuetify插件参数即可，配置逻辑和Vite一致。

方案2：全局样式覆盖（配置更简单，适合小范围调整） #

如果不想修改构建配置，直接在项目全局入口样式文件（需确保已经在main.ts/main.js中全局引入）中写入覆盖样式即可：

/* 无需!important的写法，通过叠加根选择器提高优先级 */
.v-application .v-chip {
  padding: 4px 8px;
}

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