Vue2多页项目迁Vite：Vite Serve导入Vuetify样式覆盖旧样式求助

核心问题原因 #

VuetifyResolver默认会在开发模式下自动导入Vuetify的main.sass全局样式，这和你之前通过自定义类包裹Vuetify样式的方案冲突；而生产构建时的样式处理逻辑与开发环境不同，因此build后显示正常。

具体解决步骤 #

1. 禁用VuetifyResolver的自动样式导入 #

修改vite.config.js配置，给VuetifyResolver添加importStyle: false参数，阻止它自动注入全局样式：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        VuetifyResolver({
          importStyle: false // 关闭自动导入Vuetify样式
        })
      ]
    })
  ],
  resolve: {
    alias: {
      '~': './node_modules' // 确保node_modules路径解析正常
    }
  }
})

2. 手动导入自定义包裹的Vuetify样式 #

在项目入口main.js中导入你之前Vue-CLI里用的包裹式样式文件：

// main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import './styles/wrapped-vuetify.scss' // 导入自定义包裹的样式

Vue.use(Vuetify)

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

wrapped-vuetify.scss保持原有的包裹逻辑：

.vuetify-wrap {
  @import '~vuetify/src/styles/main.sass';
}

如果~别名未生效，可直接使用相对路径指向node_modules中的文件，比如../node_modules/vuetify/src/styles/main.sass。

3. 清理全局样式自动注入配置 #

检查vite.config.js中的css.preprocessorOptions，确保没有自动导入Vuetify样式的配置：

export default defineConfig({
  css: {
    preprocessorOptions: {
      sass: {
        // 移除任何自动导入Vuetify main.sass的配置
      }
    }
  }
})

4. 验证多页应用的样式隔离 #

因为是多页项目，要确认每个页面的入口文件只导入对应需要的样式，避免不同页面的样式在开发环境下交叉注入。可在公共入口统一导入包裹后的Vuetify样式，或每个页面单独导入。

验证效果 #

修改配置后重启Vite开发服务，检查页面样式是否恢复到Vue-CLI下的正常状态，同时确认生产构建后的样式依然正常。

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