Updated README regarding relative filepaths issue

[augbog]

Referencing issue #109 it seems like this is something worth including in the README? Feel free to close the PR if unnecessary but if people are using CSS modules, they should be aware of that issue.

[jsf-clabot]

All committers have signed the CLA.

[developit]

Just got bit by this, would be great to have a warning in the readme.

[developit]

Update: you can actually circumvent this issue!

// instead of this:
.foo { background: url('./foo.png'); }

// write this:
.foo { background: url('../parent-dir/foo.png'); }

...where parent-dir is the directory name containing your .less file. This seems to circumvent the less file pathing and allow css-loader to handle it correctly (or the other way around?).

[natetarrh]

Thanks for the workaround. Unfortunately, it won't fix cases where e.g. a mixin with url is defined in a separate directory from the file that imports it.

The root cause is related to relative path ambiguity (e.g. less/less.js#2629) and the fact that less-loader enables the relative URLs option by default.

[developit]

Disabling relativeUrls does not fix the issue though.

[jhnns]

Thx. We somehow need a way to fix this... unfortunately, it's not actually a bug but more a clash of specifications.

[istvano]

Hi,

If someone is interested I have solved this using the following loaders.
basically the resolve-url-loader takes care of those relative locations and handle it well.

        test: /\.less/,
        use: [{
                  loader: "style-loader"
              }, {
                  loader: "css-loader", options: {
                      sourceMap: true,
                      importLoaders: 2
                  }
              }, {
                    loader: "postcss-loader", options: {
                        sourceMap: true
                  }
              }, {
                      loader: "resolve-url-loader", options: {
                      sourceMap: true
                  }
              }, {
                  loader: "less-loader", options: {
                      sourceMap: true
              }
        }],

[wall-wxk]

Thx @istvano .