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

Updated README regarding relative filepaths issue #121

Merged
merged 1 commit into from Dec 23, 2016

Conversation

Projects
None yet
7 participants
@augbog
Copy link
Contributor

augbog commented Dec 14, 2016

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

This comment has been minimized.

Copy link

jsf-clabot commented Dec 14, 2016

CLA assistant check
All committers have signed the CLA.

@developit

This comment has been minimized.

Copy link

developit commented Dec 15, 2016

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

@developit

This comment has been minimized.

Copy link

developit commented Dec 18, 2016

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

This comment has been minimized.

Copy link

natetarrh commented Dec 18, 2016

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

This comment has been minimized.

Copy link

developit commented Dec 18, 2016

Disabling relativeUrls does not fix the issue though.

@jhnns jhnns merged commit 470c346 into webpack-contrib:master Dec 23, 2016

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
licence/cla Contributor License Agreement is signed.
Details
@jhnns

This comment has been minimized.

Copy link
Member

jhnns commented Dec 23, 2016

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

@augbog augbog deleted the augbog:task/update-readme-issue-109 branch Dec 29, 2016

@istvano

This comment has been minimized.

Copy link

istvano commented Mar 30, 2017

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

This comment has been minimized.

Copy link

wall-wxk commented Dec 21, 2017

Thx @istvano .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment