-
-
Notifications
You must be signed in to change notification settings - Fork 194
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
less-loader is trying to resolve url references relative to the starting point(root less file) instead of using the current file #76
Comments
I can confirm this is a problem. I am running into the exact same issue. |
I'm encountering this problem too, particularly when trying to import the In my less file for that module @import "~flag-icon-css/less/flag-icon.less"; This resolves fine, and webpack starts importing this file. The problem is then within the flag node package, the relative paths to the individual flag svg files The error, excuse all the loaders... ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/csslint-loader!./~/less-loader?sourceMap!./app/styles/profiler.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../flags/1x1/vg.svg in /app/styles
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/csslint-loader!./~/less-loader?sourceMap!./app/styles/app.less 6:116980-117010
|
This looks like the |
@jhnns Tried with Is there a way to re-apply |
We need a small test-case that demonstrates this specific bug. We do have tests that this feature works under "normal" circumstances (I'm using the less-loader also in production and it works) |
@jhnns Yes, I have used less-loader many times without issue. I ran into this when (intentionally) attempting to apply That being said, I was actually able to fix my issue by simply dropping the relative filepath altogether. It still bundles the font properly via webpack, but seems to circumvent the path normalization based on original filename somehow.
|
I ran into this issue because the way I set up my webpack.config.js file - the paths were getting a mixture of forward and backwards slashes (context: __dirname + '/src/main/jsx'). Changed to use path.join and path.normalize context: path.join(__dirname, '/src/main/jsx'), This stopped errors but no files were generated so also had to update to node 4.4.4 |
I had a similar issue and solved it http://stackoverflow.com/a/37293335/1874624 edit: updated my solution |
I found the problem. Since most less and scss files are stuck in other directories than where they build to, the css parser gets confused. I added an attribute to the css loader named Example usage:
I am not 100% sure that the regex is best practice for detecting relative urls, just pulled it from stack overflow. Not sure if I will be maintaining this fork, depends if another solution is found. |
Sorry guys, this feature is working under "normal" (=expected) circumstances. Please give us a minimal example so we can investigate this. |
Hi, here is an example repo that results in build errors: npm:
entry.js
Webpack Config
I commented out the code I currently use to fix the issue. So this is what happens: Thanks. |
Thanks for providing an example @SplicePHP Your assumptions are correct, but this is the expected behavior. The less-loader generates a single css file from multiple less files. That's why the css-loader tries to resolve all urls relatively from the less entry file. When using webpack, it's best to put your binary assets like images and fonts inside your |
The problem is that most people are not in control of those variables. I am working on a pretty large project with a ton of node_modules and other git libraries. The standard is for less and scss files to be stored in another path to where the actual build is rendered to. Making these types of changes on third party libraries will be a nightmare for version control. I would have to fork nearly every git repo I use to modify the paths and I am not even sure that version control can be maintained with npm packages if these types of changes are made locally. This is a serious impediment for maintainability as far as I can tell, Stack Overflow is full of these bugs and no-one seems to have any answers. It is much easier to add a rel path variable to the css loader and no hacking of third party libraries is required. Making this small change fixes the problem and no backward compatibility is sacrificed. I will continue to use my custom css loader for now and will let you know if I find any bugs with my current implementation. |
Definitely a problem - We have to link our styles into one big lump from various sources, including some @ |
Just recognized that @SplicePHP has received a lot of upvotes. I'm not sure if I understand the use-case correctly – and maybe there are different expectations here. If you don't agree with the current behavior, you can simply overwrite that by passing the If you don't want all of that behavior, it is still legitimate to just compile Less without touching webpack at all. All that URL resolving behavior makes sense if you want to treat every file as a single module, but if you don't want that, don't use webpack for your styles. It's ok to use webpack for JS only and handle CSS with a different tool. Webpack and gulp/grunt/npm-scripts are not the same, they serve slightly different purposes. |
Relative urls has no effect when using programtically, I tried |
The situation is: there is less in one directory with imports relative to that directory, and less in a second directory with imports relative to that directory. The less in the second directory imports the less in the first directory.
I haven't got it to a state where I can test that it's totally working, but after adding |
Fixed in master. PS: To using properly @import "~flag-icon-css/less/flag-icon.less";
@flag-icon-css-path: '~flag-icon-css/flags'; |
I am getting the below error when trying to use the less loader with webpack to compile my less files.
Following is my directory structure
Following are the contents of
app.js
require('./styles/app.less');
app.less
fontImports.less
I am using the below webpack config
In fontImports.less, If I provide relative path of the font form fontImports.less, webpack command is failing with the below error.
If I provide the relative path from app.less, I am getting the expected result. Do I have to include any specific configuration to make the above work ?
You can repro this issue using the sample here
The text was updated successfully, but these errors were encountered: