vuetifyjs / vuetifyjs/vuetify-loader

Styles not loaded when using configFile and importing in webpack-plugin-vuetify@3.1.1

Open
#353 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
511
Forks
90
PR merge metrics
No merged PRs in 30d

Description

Version

webpack-plugin-vuetify@3.1.1

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 webpack-plugin-vuetify@3.1.1
  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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with webpack-plugin-vuetify@3.1.1 using configFile, importing vuetify/styles from a TypeScript entry file, and running vue-cli-service styleguidist. Inspect the plugin's handling of the configFile and the reported .sass dependency path. Done means the styles load in the bundle, custom typography overrides apply, and the invalid-dependency warning is gone.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.