[Bug Report][3.3.3] In a Nuxt 3 environment, it's not possible to override $container-max-widths.

newyee commented 1 year ago

Environment

Vuetify Version: 3.3.3 Vue Version: 3.3.4 Browsers: Chrome 116.0.0.0 OS: Windows 10

Steps to reproduce

Configure nuxt.config.ts as follows:

import vuetify from 'vite-plugin-vuetify';
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: {
  // Set a theme if enabling code highlighting
  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: {
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,
});

Modify the assets/main.scss file as follows:

$body-font-family: Roboto, 'Noto Sans JP', sans-serif;
@use 'vuetify/lib/styles/main.sass' with (
  $body-font-family: $body-font-family,
  $container-max-widths: (
    'xs': null,
    'sm': null,
    'md': 1190px,
    'lg': 1190px,
    'xl': 1190px,
    'xxl': 1190px,
  )
);

code,
kbd,
pre,
samp {
  font-family: 'Inconsolata', 'Noto Sans JP', monospace;
}

Open the browser and check the max-width of the areas where is used.

Expected Behavior

The max-width of the areas where is used has been set to 1190px.

Actual Behavior

The has the default value set before overwriting.

Reproduction Link

https://github.com/newyee/nuxt-site

KaelWD commented 1 year ago

https://vuetifyjs.com/en/features/sass-variables/#component-specific-variables

newyee commented 1 year ago

I added the following section to nuxt.config.ts as referenced in the link you provided, but I encountered warnings, and the page couldn't be displayed:

hooks: {
  'vite:extendConfig': (config) => {
    config.plugins!.push(
      vuetify({
        styles: {
          configFile: 'assets/main.scss',
        },
      })
    );
  },
},

Several warnings were output, such as:

"Sourcemap for 'plugin-vuetify:components/VResponsive/VResponsive.sass' points to missing source files." "[9:09:46] WARN Sourcemap for 'plugin-vuetify:components/VProgressLinear/VProgressLinear.sass' points to missing source files." "[9:09:50] WARN Sourcemap for 'plugin-vuetify:components/VSelectionControlGroup/VSelectionControlGroup.sass' points to missing source files."

vuetifyjs / vuetify