vuetify-loader icon indicating copy to clipboard operation
vuetify-loader copied to clipboard

Styles not loaded when using configFile and importing in [email protected]

Open patrik-fasang-ness opened this issue 6 months ago • 5 comments

Version

[email protected]

Description

When using the configFile option in the plugin configuration and importing vuetify/styles in a TypeScript file, the styles are not being included in the final bundle.

Furthermore, I see warning in terminal:

Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "C:/xxx/node_modules/.cache/vuetify/lib/styles/main.sass"`

Steps to Reproduce

  1. Install [email protected]
  2. Configure the plugin with configFile:
    const { VuetifyPlugin } = require('webpack-plugin-vuetify');
    VuetifyPlugin({
      configFile: 'path/to/my/settings.scss'
    })
    
  3. Import styles in your entry TypeScript file:
  import 'vuetify/styles';
  1. Run the project via vue-cli-service styleguidist

Expected Behavior

Vuetify styles should be loaded and applied correctly.

Actual Behavior

The styles are missing, and Vuetify components appear unstyled.

Additional Notes

  • This issue does not occur in version 2.0.1
  • Without configFile, styles are loaded, but Vuetify’s defaults (like typography) are not overridden in that case.

patrik-fasang-ness avatar Jul 24 '25 11:07 patrik-fasang-ness

@KaelWD can you help me?

patrik-fasang-ness avatar Aug 05 '25 08:08 patrik-fasang-ness

the same issue :( it works on Mac, but not on Windows Problem looks like the same as in https://github.com/vuetifyjs/vuetify-loader/pull/280/files#diff-506a554cc9ae4bd87c5794ca0fabeaab16c44d6542fc32a426a5b0ec4038171b

alko999 avatar Oct 21 '25 11:10 alko999

@patrik-fasang-ness it seems we should use nodejs v.22+ it works for me after upgrade nodejs from v18 to v22

alko999 avatar Oct 21 '25 16:10 alko999

@alko999 we have the same problem on our side with node 22.16, have you done anything else to fix the problem ?

malopgrics avatar Oct 23 '25 13:10 malopgrics

No, just update Node version. "webpack-plugin-vuetify": "3.1.2", "@vue/cli-service": "5.0.9",

Current node version 22.21.0

alko999 avatar Oct 23 '25 16:10 alko999