Add configuration option to change the way file paths are generated

[Auxx]

When building with webpack, all file paths should be relative to webpack project root, otherwise files will not be resolved.

The error message from webpack:

ERROR in .//css-loader!.//less-loader!./src/styles/styles.less
Module build failed: Cannot resolve 'file' or 'directory' ./C:\dev-x\angular2-ts-boilerplate\src\app\app.component.less in ../app
@ ../app/**.less (line 1, column 0)
near lines:

@import "C:\dev-x\angular2-ts-boilerplate\src\app\app.component.less";

@ ./src/styles/styles.less 4:14-123

[just-boris]

I am using this with webpack and it works fine for me. Could you please provide more information about your webpack setup?

[Auxx]

You can check my current setup here https://github.com/Auxx/angular2-ts-boilerplate/tree/glob (angular2-ts-boilerplate project, branch "glob").

[just-boris]

Well, there is nothing to do on our side, it is only issues with Webpack integration. In your example you should add option root=true for less-loader:

-{'test': /\.less$/, 'loader': extractTextPlugin.extract('style', 'css!less')},
+{'test': /\.less$/, 'loader': extractTextPlugin.extract('style', 'css!less?root=true')},

Otherwise every import will be prefixed with ./ and your import will be broken.

Also you should add more asterisks to glob expression to look for files in component folders

-@import "../app/**";
+@import "../app/**/**";

[Auxx]

Well, that didn't help at all, sadly. I'm still getting the same error.

[just-boris]

The same setup works for me. Let's check the dependencies. I have:

├── less-loader@2.2.2
├─┬ less-plugin-glob@1.1.1
├─┬ webpack@1.12.10

I cleaned up the node_modules folder, then npm install && gulp build

[Auxx]

OK, I think I know what is the root of the problem. I'm using Windows and path separator is "" on Windows and it should be escaped or changed to "/". Generated imports look this way right now:

@import "C:\dev-x\angular2-ts-boilerplate\src\app\app.component.less";
@import "C:\dev-x\angular2-ts-boilerplate\src\app\hello\hello.component.less";

[just-boris]

That makes sense.
I'll find a windows image and will check it again.

[Auxx]

I might make a fix for that this evening after work.

[Auxx]

After some investigation I've found out that the issue is in LESS compiler - unless the string starts with a slash, it is always prepended with "./". I did not manage to find the offending piece of code yet, but it looks like your plugin is OK. Issue can be closed now, but I will continue my journey...

[just-boris]

Ok, I will be considering the issue as on hold. If you file related issue somewhere else, link it here, I'd like to track.

[Auxx]

A bug was found in webpack/loader-utils after many hours of debugging :) An issue with a bug description and a link to pull request with a fix is here.

@hannabasha check it out. If you need this fix before it goes to the main line if loader-utils, you can replace the library with my version inside your node_modules. Make sure to to update everything properly once the library is updated officially.

[hannabasha]

@Auxx thank you! I will close my opened issue then!

[bostrom]

Hi, I have the same problem in my webpack setup even though I'm on OS X and have added the root=true to the less configuration. I have a sample repository here with the less-glob tag pointing to the problematic setup https://github.com/bostrom/webpack-demo/tree/less-glob.

Any ideas on this one?