less-plugin-glob
less-plugin-glob copied to clipboard
just-boris
Add configuration option to change the way file paths are generated
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
I am using this with webpack and it works fine for me. Could you please provide more information about your webpack setup?
You can check my current setup here https://github.com/Auxx/angular2-ts-boilerplate/tree/glob (angular2-ts-boilerplate project, branch "glob").
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/**/**";
The same setup works for me. Let's check the dependencies. I have:
├── [email protected]
├─┬ [email protected]
├─┬ [email protected]
I cleaned up the node_modules folder, then npm install && gulp build
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";
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...
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.
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.
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?
