如何通过Sass文件自定义编译Vuetify样式以缩减体积？

当然可以！Vuetify的Sass源码就是为了让开发者按需编译样式而生的，刚好适配你这种只用到少量组件的场景，能大幅砍掉冗余代码，把CSS体积压到最小。下面分不同项目类型给你具体操作步骤：

前置准备 #

首先确保你的项目已经配置好Sass预处理器（推荐用dart-sass，node-sass已经停止维护了），并且已经集成了Vuetify依赖。

一、Vue CLI 项目（Vue 2/Vue 3） #

1. 移除全量CSS导入
   打开src/plugins/vuetify.js（Vue 3可能是vuetify.ts），删掉原来的全量样式导入：

   // 删掉这行：import 'vuetify/dist/vuetify.min.css'
   

2. 创建自定义Sass入口文件
   在src/styles目录下新建vuetify.scss，内容如下：

   // 1. （可选）自定义主题变量，比如字体大小、圆角、颜色等
   $font-size-root: 16px;
   $btn-border-radius: 4px;
   $primary: #1976D2;
   
   // 2. 导入Vuetify核心基础样式（必选，包含全局重置、基础工具类等）
   @import 'vuetify/src/styles/main.sass';
   
   // 3. 导入你实际用到的组件样式
   // 举个例子：如果你只用了v-btn和v-card（含子组件）
   @import 'vuetify/src/components/VBtn/VBtn.sass';
   @import 'vuetify/src/components/VCard/VCard.sass';
   @import 'vuetify/src/components/VCard/VCardTitle.sass';
   @import 'vuetify/src/components/VCard/VCardText.sass';
   
   // 4. （可选）如果组件依赖特定工具类，按需导入（比如v-btn用到flex布局）
   @import 'vuetify/src/styles/tools/_display.sass';
   

3. 在Vuetify配置中引入自定义样式
   在vuetify.js里导入你的自定义Sass文件：

   import '@/styles/vuetify.scss'
   import { createVuetify } from 'vuetify' // Vue 3写法，Vue 2对应new Vuetify()
   
   export default createVuetify({
     // 你的Vuetify配置（比如主题、图标等）
   })
   

二、Vite 项目（Vue 3） #

1. 移除全量CSS导入
   打开src/main.js（或main.ts），删掉全量样式导入：

   // 删掉这行：import 'vuetify/dist/vuetify.min.css'
   

2. 创建自定义Sass入口文件
   和Vue CLI项目一样，在src/styles下新建vuetify.scss，内容参考上面的示例，按需导入核心样式和组件样式。

3. 配置Vite识别自定义Sass
   打开vite.config.js，配置Vuetify插件和Sass预处理器：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import vuetify from 'vite-plugin-vuetify'
   
   export default defineConfig({
     plugins: [
       vue(),
       // 开启组件自动导入（JS部分），配合样式按需导入效果更好
       vuetify({ autoImport: true })
     ],
     css: {
       preprocessorOptions: {
         sass: {
           // 自动注入自定义Sass文件，不用在main.js里手动导入
           additionalData: `@import "@/styles/vuetify.scss"`
         }
       }
     }
   })
   

关键注意事项 #

• 组件依赖的子样式：有些组件包含子组件（比如v-card有v-card-title、v-card-text），需要一并导入对应的Sass文件，否则样式会缺失。
• 工具类按需导入：如果遇到样式异常（比如布局错乱），可以检查是否缺少对应的工具类样式，可临时导入@import 'vuetify/src/styles/tools/_all.sass'（体积很小），再逐步精简。
• 版本适配：Vuetify 2和3的Sass文件路径基本一致，但如果找不到文件，可以去node_modules/vuetify目录下确认具体路径。
• 额外优化：生产环境可以配合purgecss进一步清理未使用的样式类，不过手动按需导入Sass后，体积已经足够小了，这个可以作为可选步骤。

这样操作后，你的最终CSS只会包含核心样式和你用到的组件样式，完全排除了99%的冗余代码，体积会大幅缩减到几十KB甚至更小。

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