如何覆盖 nuxt3 + vite 中的 vuetify scss 变量

Question

我想覆盖 vuetify scss varibale 以更改 v-text-field border-redius

// https://nuxt.com/docs/api/configuration/nuxt-config
import { resolve } from 'path'

export default defineNuxtConfig({
  css: [
    'vuetify/lib/styles/main.sass',
  ],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @import "@/assets/variables.scss";
          `
        }
      }
    }
  },
  app: {
    head: {
      title: '',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' },
        { name: 'format-detection', content: 'telephone=no' },
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
})

检测到 'varibales.scss' 中所有定义的变量，但我想要 ovrride vuetify 变量。

Answer 1

我尝试使用 vite-plugin-vuetify 和一些附加配置来设置 vueitfy3 以覆盖变量，但遇到了很多与 vuetify 相关的警告。

警告

nuxt.config

import vuetify  from 'vite-plugin-vuetify'


export default defineNuxtConfig({
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) =>
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        config.plugins.push(
          vuetify({
            styles: {
              configFile: 'assets/variables.scss',
            },
          })
        )
      );
    }
  ],
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @import "assets/variables.scss";
          `
        }
      }
    }
  },
  app: {
    head: {
      title: '',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' },
        { name: 'format-detection', content: 'telephone=no' },
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
})

plugins/vuetify

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'


export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives
  })

  nuxtApp.vueApp.use(vuetify)
})

assets/variables.scss

@use 'vuetify/settings' with (
    $application-background: red,
    $application-color: red
);