nuxt3 + vuetify3: SASS変数の上書きについて

Question

解決できない問題があった為、原因をつきとめたく質問させて貰いました。

Vuetifyコンポーネントの<v-conatiner>のmax-widthを書き換える為、assets/main.scssを以下のように設定しました。

@use 'vuetify/lib/styles/main.sass' with (
  $body-font-family: $body-font-family,
  $border-style-root: dotted,
  $border-color-root: blue,
  $container-max-widths: (
    'xs': null,
    'sm': null,
    'md': 1190px,
    'lg': 1190px,
    'xl': 1190px,
    'xxl': 1190px,
  ),
  $font-weights: (
    'thin': 600,
    'light': 600,
    'regular': 400,
    'medium': 500,
    'bold': 700,
    'black': 900,
  )
);

こちらですが、max-widthプロパティの上書きができませんでしたが、それ以外のborder-colorなどのプロパティは上書きを行うことができました。以下は、nuxt.config.tsです

import vuetify from 'vite-plugin-vuetify';
import { resolve } from 'pathe';
import fs from 'fs';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@nuxtjs/i18n',
    [
      '@nuxtjs/algolia',
      {
        ALGOLIA_INDEX_NAME: process.env.ALGOLIA_INDEX_NAME || '',
        apiKey: process.env.ALGOLIA_SEARCH_ONLY_API_KEY,
        applicationId: process.env.ALGOLIA_APPLICATION_ID,
        instantSearch: {
          theme: 'algolia',
        },
      },
    ],
  ],
  content: {
    highlight: {
      // コードハイライトを有効化する場合はテーマを設定
      theme: 'github-dark-dimmed',
    },
    documentDriven: true,
  },
  i18n: {
    // lazy: true,
    locales: [
      { code: 'en', file: 'en.json', name: 'English' },
      { code: 'ja', file: 'ja.json', name: 'Japanese' },
    ],
    defaultLocale: 'ja',
    langDir: 'lang/',
    strategy: 'no_prefix',
  },

  nitro: {
    prerender: {
      routes: [
        '/',
        '/ja/',
        '/en/',
        '/ja/getting-started/introduction/',
        '/ja/getting-started/installation/',
        '/en/getting-started/introduction/',
        '/en/getting-started/installation/',
      ],
    },
  },

  app: {
    baseURL: process.env.LOCAL_SERVER === 'true' ? '/' : '/pub/pro-bravia-nuxt',
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      link: [
        {
          rel: 'preconnect',
          href: 'https://fonts.googleapis.com',
        },
        {
          rel: 'preconnect',
          href: 'https://fonts.gstatic.com',
          crossorigin: '',
        },
        {
          rel: 'preload',
          as: 'style',
          href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Inconsolata:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap',
          onload: 'this.onload=null;this.rel="stylesheet"',
        },
      ],
    },
  },

  css: ['assets/main.scss'],
  build: {
    transpile: ['vuetify'],
  },
  hooks: {
    'vite:extendConfig': (config) => {
      config.plugins!.push(vuetify());
    },
  },
  runtimeConfig: {
    public: {
      baseUrl: process.env.NUXT_BASE_URL,
    },
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/scss/_variables.scss" as *;',
        },
      },
    },
    ssr: {
      noExternal: ['vuetify'],
    },
    define: {
      'process.env.DEBUG': false,
    },
  },
  extends: [],
  // ssr: false,
});

環境情報
・Nuxt 3.5.3
・vuetify 3.3.3

何故、$container-max-widthsの上書きが行えないのかが分からないのですが、こちらはライブラリのバグなのでしょうか。バグではないとすると何が原因なのかつきとめたい為、どなたかご助言頂けましたら幸いです。

調査したこと・試したこと

node_modules/vuetify/lib/styles/settings/_variables.scss内に上書きできる変数が存在していることの確認を行いました。

$container-max-widths: map-deep-merge(
  (
    'xs': null,
    'sm': null,
    'md': map.get($grid-breakpoints, 'md') * 0.9375,
    'lg': map.get($grid-breakpoints, 'lg') * 0.9375,
    'xl': map.get($grid-breakpoints, 'xl') * 0.9375,
    'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375,
  ),
  $container-max-widths
);

Answer 1

nuxt.config.tsのhooksを以下のようにしたら、SASS変数を上書き出来、ブラウザで表示させることができました。

  css: ['assets/settings.scss'],
  hooks: {
    'vite:extendConfig': (config) => {
      config.plugins!.push(
        vuetify({
          autoImport: true,
          styles: {
            configFile: 'assets/settings.scss',
          },
        })
      );
    },
  },

SCSSのファイル名ですが、assets/main.scssのままでは、vuetify側のファイル名と被っておりエラーが出た為settings.scssに変更しました。
また、ターミナルに以下のような警告がいくつか出力されましたが、原因は不明です。

 WARN  Sourcemap for "plugin-vuetify:components/VApp/VApp.sass" points to missing source files                                                                                           8:17:19  


 WARN  Sourcemap for "plugin-vuetify:components/VMain/VMain.sass" points to missing source files  

警告については、GitHubにissueが投稿されていました。
https://github.com/vuetifyjs/vuetify-loader/issues/290