在Vuetify 3中为v-btn新增tiny尺寸时的Sass/Vite报错解决

1. 处理「There is no module with the namespace "map"」报错 #

这个错误是因为调用Sass的map.merge等函数时，未导入Sass内置的map模块。在你的settings.scss开头添加：

@use 'sass:map' as map;

2. 处理「("font-size": 0.41rem) isn't a valid CSS value」报错 #

该错误源于自定义按钮尺寸的map格式不符合Vuetify规范，需要保证属性值合法且结构正确。

正确的tiny尺寸配置 #

在settings.scss中，通过合并默认的$btn-sizes映射来新增尺寸：

@use 'sass:map' as map;
@use 'vuetify/styles' with (
  $btn-sizes: map.merge(
    $btn-sizes,
    (
      tiny: (
        height: 18px,
        min-width: 18px,
        padding: 0 4px,
        font-size: 0.6rem,
        border-radius: 2px,
        line-height: 1
      )
    )
  )
);

关键注意点 #

• 尺寸键名（tiny）无需加引号，保持为Sass标识符格式
• 所有属性值必须是合法CSS值，同时检查配置的语法完整性（比如括号、逗号是否匹配）
• 确保Vite配置正确引入Vuetify的Sass预处理器，示例配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }),
  ],
})

3. 验证配置 #

保存settings.scss后重启Vite开发服务，在组件中测试：

<v-btn size="tiny">Tiny Button</v-btn>

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