-
-
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
Unable to resolve module error and reproduction of issue #109
Comments
👍 please resolve that issue |
Thx for the detailed bug report. With your description and the minimal test example I was able to spot the issue very quickly 👍 Unfortunately, that's a really tricky one, let me explain it:
// before compilation
url('MaterialIcons-Regular.eot')
// after compilation
url('material-design-icons/MaterialIcons-Regular.eot')
// all urls are relative to index.less
It basically boils down to LESS + relativeUrls: true + CSS modules is not compatible. Either you convince less to rewrite their urls so that relative urls start with a dot, or you override the |
@jhnns Thanks for looking into this! I'm going to close this issue, but I've left the repository in place in case anybody else comes across this issue. |
+1 - same problem :-/ |
@MrBoolean unfortunately this problem is not going away any time soon. As stated above "It basically boils down to LESS + relativeUrls: true + CSS modules is not compatible" I migrated away from LESS because I needed CSS modules and relative imports, and CSS formats are relatively interchangeable these days. |
@jsonnull [module_root]/ It looks so ugly, but i work. |
Haha, I resolve it; this is hack private images = require("./images");
this.images.loader .loader{
background-image: url("./301.gif");
} |
It is fine. 🤔 .loader{
background-image: url("\./301.gif");
} |
@jhnns is there a way to disable this? When importing a lot of 3rd party CSS files, they have
|
For those that come across this issue and find that it completely blocks them from using less-loader... for example I have styling from some 3rd party libs that have You can disable all this URL mangling with
This makes all This was fine for me, as I was mostly just wanted the less file hot reloading. |
@rally25rs thanks so much for that - it's worth noting that if you only need to do this for certain files you can change the rule so it only uses that loader with those custom options if needed. I'm a total noob when it comes to Webpack, so not sure if I'm doing it right but it seems to be working good for me. Here's my current webpack config: {
test: /\.less$/,
exclude: /site.less$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader'],
fallback: 'style-loader'
})
},
// Custom less compiler for frontend site less.
// This basically just turns off resolving of url() as they should all be in the public_html already
// so don't need to be resolved, and would cause problems if they are.
{
test: /site.less$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {url: false, sourceMap: true}
}, {
loader: 'less-loader',
options: {relativeUrls: false, sourceMap: true}
}],
fallback: 'style-loader'
})
}, |
@garygreen Thanks for your codes |
I got this to work without needing to turn off relativeUrls by making use of 'url-loader' for fonts/images: url-loader converts files (fonts and images in this case) into base-64 strings. This way the resulting css references for fonts and/or images is a direct base64 string representation of the image or font instead of a path (relative or otherwise). For example:
You could probably combine the loaders but I wanted them to behave slightly differently - ie |
Does the Considering that @jhnns added the Less functionality, I think it addressed this issue, correct? If so, it would make sense to remove the "CSS Modules gotcha" in the readme. Note the original issue wasn't so much even Less + relativeUrls: true (now rewriteUrls: 'all') + CSS Modules, but actually Less + relativeUrls: true + CSS modules + the Less plugin + webpack loader behavior working together to cause a problem, but the additional option should make this more flexible and compatible with Webpack + CSS modules. |
Also, as noted in #276, no special |
For future reference: passing |
For remote @import urls check this out |
Following configuration helped me resolve the issue with relative URLs due to less-loader + CSS modules (mentioned here)
Hope this helps! |
I've run into a bunch of issues attempting to use
@import
andurl()
when adding CSS modules to a current project and usingless-loader
.It looks like a lot of people have this error:
... and so on.
I absolutely cannot get any kind of relative file load to work. I've attempted to create a minimal reproducible test case for the issue. The repository is located here: https://github.com/jsonnull/less-modules-resolve.
npm install
andnpm run build
to see the issue.See below, the file is clearly present:
I've tried every combination for the less file import as well as the
url()
import I can think of...file
- I think this one should work?./file
- I think this one should definitely work~file
- I think this one should not work/file
- I think this one should not workAnd, anyways, none of these methods work.
Assuming this is possible, how can the repository above be fixed so that all issues are resolved using the current directory structure? Otherwise, are there really combinations of relative paths that are completely impossible to use for importing?
From scrounging through issues it really does seem like nobody has a clear understanding of what this issue is or how to fix it. If we can come up with a clear answer for this issue for why it doesn't work and how to fix, hopefully others can learn from this and we can come up with good documentation for how to avoid this issue.
The text was updated successfully, but these errors were encountered: