sveltejs / svelte-preprocess

A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
MIT License
1.76k stars 151 forks source link

Imports in less are added as dependencies with relative paths but webpack requires absolute paths #495

Closed lundal closed 2 years ago

lundal commented 2 years ago

Describe the bug Imports in less are added as dependencies with relative paths ("node_modules/package/file.less"), but webpack requires absolute paths ("/home/user/project/node_modules/package/file.less").

Logs

WARNING in ./app/App.svelte
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:
 * "node_modules/package/file.less"
 @ ./app/App.svelte
 @ ./app/app.js

To Reproduce Use webpack with svelte-loader and svelte-preprocess:

{
  loader: "svelte-loader",
  options: {
    preprocess: sveltePreprocess(),
  },
},

Use an import within less in a svelte file:

<style lang="less">
  @import "package/file.less"
  ...
</style>

During build, webpack will complain about invalid dependencies.

Example that reproduces the error: https://github.com/lundal/svelte-less-example ($ yarn install && yarn build)

Expected behavior No complaints from webpack