Vuetify

路线前端

SASS 变量

自定义全局变量

// index.scss(entry)
@use "./variables";
@use "vuetify/styles/main.sass";
...

// variables.scss
@use "vuetify/lib/styles/tools/functions" as *;
// This will false all colors which is not necessory for theme
$color-pack: false;

// Global font size and border radius
$font-size-root: 1rem;
$border-radius-root: 12px;

// Global Radius as per breakeven point
$rounded: () !default;
$rounded: map-deep-merge(
    (
        0: 0,
        "sm": $border-radius-root * 0.5,
        null: $border-radius-root,
        "md": $border-radius-root * 1,
        "lg": $border-radius-root * 2,
        "xl": $border-radius-root * 6,
        "pill": 9999px,
        "circle": 50%,
        "shaped": $border-radius-root * 6 0,
    ),
    $rounded
);
...

自定义组件变量

// settings.scss
// used in vite.config.mts>configFile to customize component specific scss variables
@use "vuetify/settings" with (
  // 把 `<v-row><v-col>` 变为 24栏 的，以及更改断点
  $grid-columns: 24,
  $grid-breakpoints: (
    "xs": 0,
    "sm": 420px,
    "md": 600px,
    "lg": 900px,
    "xl": 1440px,
    "xxl": 1800px,
  )
);

// variables.scss: d-none,d-lg-flex $display-breakpoints 依赖 $grid-breakpoints
$grid-breakpoints: (
    "xs": 0,
    "sm": 420px,
    "md": 600px,
    "lg": 900px,
    "xl": 1440px,
    "xxl": 1800px,
) !default;

// vite.config.mts
import vuetify from "vite-plugin-vuetify";

export default defineConfig(({ mode, command }) => {
    return {
        ...
        plugins: [
            ...
            vuetify({
                autoImport: true,
                styles: {
                    configFile: "path/to/settings.scss",
                },
            }),
        ],
        ...
    }
})

threshholds

以上的代码不会影响 useDisplay，通过配置以下代码来使得 useDisplay 也保持一致的断点：

import { createVuetify} from 'vuetify'

export default createVuetify({
  display: {
    mobileBreakpoint: 'sm',
    thresholds: {
      xs: 0,
      sm: 420,
      md: 600,
      lg: 900,
      xl: 1440,
      xxl: 1800,
    },
  },
})