how to override the vuetify scss varibales in nuxt3 + vite

Question

I want to override the vuetify scss variable to change the v-text-field border-radius

I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced so many warnings related to vuetify:

warrnings

Code sample

/* nuxt.config */

import vuetify  from 'vite-plugin-vuetify'


export default defineNuxtConfig({
  build: {
    transpile: ['vuetify'],
  },
  modules: [                           /* updated */
    async (options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) =>
        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.ts

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 (       /* updated */
    $application-background: red,
    $application-color: red
);

All defined varibales in the 'varibales.scss' are detected, but i want to override the vuetify varibales.

I think, changing the property name from __additionalData__ to __prependData__ will help. Something like this: ```preprocessorOptions: { scss: { prependData: `@import "@/assets/variables.scss"; ` }}``` — Bubai, Jan 28 '23 at 16:07
Please, look into this: https://stackoverflow.com/a/72723476/9526947 — Bubai, Jan 29 '23 at 14:03
As the warnings suggest files are missing, make sure you've `{ "sourceMap": true }` is present inside **"tsconfig.json"**. — Bubai, Jan 29 '23 at 19:21
the "sourceMap" there was not in tsconfig.json, I added it, but the bug did not solve. — Mahdi Ghanbari, Jan 29 '23 at 19:48
There has been issue logged related to this https://github.com/nuxt/nuxt/issues/15412 — rozky, Feb 05 '23 at 12:10

Mahdi Ghanbari · Answer 1 · 2023-01-29T15:50:06.640

I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced with so many warnings related to vuetify.

warrnings

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
);

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — MD. RAKIB HASAN, Jan 31 '23 at 07:18

how to override the vuetify scss varibales in nuxt3 + vite

1 Answers1