Environment: Nuxt3 + Vue3 + Vuetify3.

When using Vuetify3, I found that the padding of column used in v-data-table is too much. So I want to shrink it to padding: 0 2px. After googleing and reading https://vuetifyjs.com/en/features/sass-variables/. I found there are two approachs.

solution 1:
modify every page which uses v-data-table with below code:

<style scoped>
.v-data-table :deep(td) {
  padding: 0 0px !important;
}

</style>

solution 2:

I prefer to this approach.

According to https://vuetifyjs.com/en/api/v-table/#sass-table-column-padding. It says that the padding of column in v-data-table is controlled by $table-column-padding. Therefore, I made below changes:

1. check my packages.json and it already has a sass package.

    "dependencies": {
      "@mdi/font": "^7.2.96",
      "@nuxt-alt/proxy": "^2.5.8",
      "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
      "@pinia/nuxt": "^0.5.1",
      "axios": "^1.6.8",
      "mdi": "^2.2.43",
      "mitt": "^3.0.1",
      "pinia": "^2.1.7",
      "pinia-plugin-persistedstate": "^3.2.1",
      "sass": "^1.63.6",
      "vue": "^3.3.13",
      "vue-router": "^4.2.5",
      "vue3-print-nb": "^0.1.4",
      "vuetify": "^3.4.8",
      "vuex": "^4.1.0"
    }
   

2. Add /assets/scss/settings.scss with:

    @use 'vuetify/settings' with (
      $table-column-padding: 0 2,
    );
   

3. Well, I don’t know how to continue because the vuetify page said below:
   

But I can not find the file vite.config.js. Nor is there a folder named src/styles/

Below is my /plugins/vuetify

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import * as labsComponents from 'vuetify/labs/components'
import '@mdi/font/css/materialdesignicons.css'
import {aliases, mdi} from "vuetify/iconsets/mdi";

/**
 * https://pictogrammers.com/library/mdi/
 */
export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: false, // https://vuetifyjs.com/en/getting-started/installation/
        // components,

        components: {
            ...components,
            ...labsComponents
        },
        directives,

        icons: {
            defaultSet: 'mdi',
            aliases,
            sets: {
                mdi
            }
        }
    })

    nuxtApp.vueApp.use(vuetify)
})

Below is my nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
    'vuetify/lib/styles/main.sass',
    'mdi/css/materialdesignicons.min.css',
    '@/assets/scss/style.scss',
  ],

  build: {
    transpile: ['vuetify'],
  },

  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
  components: {
    "dirs": [
      {
        "path": "~/components/tenant",
        "global": true
      },
        "~/components"
    ]
  },
  typescript: {
    strict: true,
    typeCheck: false
  },

  runtimeConfig: {
    // The private keys which are only available server-side
    apiSecret: '123',
    // Keys within public are also exposed client-side
    public: {
      // apiBase: '/api'
      apiBase: process.env.NUXT_PUBLIC_API_BASE
    }
  },
  modules:[
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt'
  ]
})

Any instruction for how to complete the above approach 2 ?