vuetifyjs / vuetify-loader

📦 Webpack and Vite plugins for treeshaking Vuetify components and more
https://vuetifyjs.com/customization/a-la-carte#vuetify-loader
MIT License
511 stars 91 forks source link

[Bug Report][3.3.3] The page became unresponsive when I added 'styles.configFile' to the plugin options #314

Closed newyee closed 1 year ago

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

  1. Add the following item to nuxt.config.ts.
    
    css: ['assets/main.scss'],
    hooks: {
    'vite:extendConfig': (config) => {
      config.plugins!.push(
        vuetify({
          styles: {
            configFile: 'assets/main.scss',
          },
        })
      );
    },
    },

2. 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; }

3. An error is output to the terminal.

[9:09:38] WARN Sourcemap for "plugin-vuetify:components/VMessages/VMessages.sass" points to missing source files

[9:09:45] WARN Sourcemap for "plugin-vuetify:components/VSelectionControl/VSelectionControl.sass" points to missing source files WARN Sourcemap for "plugin-vuetify:components/VCard/VCard.sass" points to missing source files 10:53:13

WARN Sourcemap for "plugin-vuetify:components/VAvatar/VAvatar.sass" points to missing source files 10:53:19

WARN Sourcemap for "plugin-vuetify:components/VIcon/VIcon.sass" points to missing source files 10:53:24

WARN Sourcemap for "plugin-vuetify:components/VImg/VImg.sass" points to missing source files 10:53:30

[10:53:37] WARN Sourcemap for "plugin-vuetify:components/VResponsive/VResponsive.sass" points to missing source files

[10:53:44] WARN Sourcemap for "plugin-vuetify:components/VProgressLinear/VProgressLinear.sass" points to missing source files

WARN Sourcemap for "plugin-vuetify:directives/ripple/VRipple.sass" points to missing source files



### Expected Behavior
Error-free, allowing for the override of SASS variables

### Actual Behavior
An error occurs, preventing the page from being displayed in the browser.

### Reproduction Link
[https://github.com/newyee/nuxt-site/tree/feature/override-sass-variables](https://github.com/newyee/nuxt-site/tree/feature/override-sass-variables)

### Other comments
The version of Nuxt 3 is 3.5.3.

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->
newyee commented 1 year ago

After setting 'autoImport' to 'true' as shown below, I was able to display the page in the browser. However, the warning continues to be displayed.

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

Duplicate of #290