Add new size prop to vuetify 3 v-btn in settings.scss file

Question

Im working with vuetify 3 and vue3 and I'm trying to add a new size variant to the v-btn size prop. I want to add a new size called tiny and make it smaller than the x-small option. In the documentation it looks like I just add it in the settings.scss file

@use 'sass:map';
@use 'vuetify/settings' with (
  // Buttons
  $button-sizes: map.merge(
    (
      'height': $button-height,
      'font-size': $button-font-size,
      'width-ratio': $button-width-ratio,
      'padding-ratio': $button-padding-ratio
    ),
    $button-sizes
  )

 // other css here....
);

But doing this I get a vite error: [plugin:vite:css] [sass] There is no module with the namespace "map". How can I add the new size prop? I've installed sass but I have no idea where to go from here.

After adding the @use statement from comment below, i know get different errors

[plugin:vite:css] [sass] ("font-size": 0.41rem) isn't a valid CSS value.
   ╷
29 │      $button-sizes: merge(
   │ ┌───────────────────^
30 │ │┌     tiny
31 │ ││     (
32 │ ││       'font-size': 0.41rem
33 │ ││     ),
   │ │└─────^ value
34 │ │      $button-sizes
35 │ │    ),
   │ └────^ unknown function treated as plain CSS
   ╵
  src\vuetify\settings.scss 30:5        @use
  plugin-vuetify:styles\main.sass 1:1  root stylesheet

score 0 · Answer 1 · answered Jun 22 '23 at 22:15

Sass's new module system handles this functionality a little differently. When using map.merge instead of map-merge, you'll want to make sure you include the following line to use the corresponding module:

@use 'sass:map';

You can read more about the new module system here on Github, courtesy of this answer to an adjacent question.

Add new size prop to vuetify 3 v-btn in settings.scss file

1 Answers1