如何在Vite Vue-TS项目中添加Vuetify Material Design预设Rally？

vue-cli-plugin-vuetify-preset-rally是针对Vue CLI项目开发的插件，Vite项目无法直接适配，且该插件未提供TypeScript类型定义，这就是你遇到报错的原因。下面是手动实现Rally预设效果的具体步骤：

1. 确认Vuetify基础配置 #

首先确保你的Vite项目已经正确初始化Vuetify，比如存在src/plugins/vuetify.ts文件，基础代码如下：

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify({
  // 后续将添加Rally预设配置
})

2. 手动导入Rally预设样式变量 #

Rally预设的核心是一套Material Design风格的SCSS变量，我们可以手动创建样式文件引入这些变量：

• 在src/styles下新建vuetify-rally-preset.scss，写入Rally的核心样式变量：

@use 'vuetify/settings' with (
  $color-pack: 'material',
  $primary: #1976d2,
  $secondary: #424242,
  $accent: #82b1ff,
  $error: #f44336,
  $info: #2196f3,
  $success: #4caf50,
  $warning: #ffc107,
  $font-family: 'Roboto', sans-serif,
  $border-radius-root: 8px
);

• 修改src/plugins/vuetify.ts，将默认的vuetify/styles替换为我们的自定义样式文件：

import '@mdi/font/css/materialdesignicons.css'
import '../styles/vuetify-rally-preset.scss' // 替换原样式导入
import { createVuetify } from 'vuetify'

export default createVuetify({
  // 添加Rally预设的组件默认配置
  defaults: {
    global: {
      ripple: true
    },
    VBtn: {
      variant: 'flat',
      height: 40,
      rounded: 'lg'
    },
    VCard: {
      rounded: 'lg',
      elevation: 2
    }
  }
})

3. 解决TypeScript类型报错 #

如果TS仍然提示类型相关错误，在项目根目录的env.d.ts中添加以下声明：

declare module 'vuetify-preset-rally' {
  import type { Preset } from 'vuetify'
  const preset: Preset
  export default preset
}

4. 验证效果 #

运行yarn dev启动项目，检查组件样式是否符合Rally预设的Material Design风格，比如按钮的圆角、卡片的阴影等。

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