vuetifyjs / vuetifyjs/vuetify-loader
Styles not loaded when using configFile and importing in webpack-plugin-vuetify@3.1.1
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
- Install
webpack-plugin-vuetify@3.1.1 - Configure the plugin with
configFile:const { VuetifyPlugin } = require('webpack-plugin-vuetify'); VuetifyPlugin({ configFile: 'path/to/my/settings.scss' }) - Import styles in your entry TypeScript file:
import 'vuetify/styles';
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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