Css-loader: Relative paths don't work in :local scope

[mnpenner]

Compiling with line 12 commented out (:local scope URL) works as expected, but compiling with line 2 commented out (global scope) does not.

The full error with webpack --display-error-details is:

    ERROR in ./~/css-loader?{"sourceMap":false,"root":"/path/to/project/www","localIdentName":"[name]_[local]--[hash:base64:5]"}!./~/postcss-loader!./~/less-loader?strictMath&strictUnits!./assets/scripts/lib/components/Modal/Modal.less
    Module not found: Error: Cannot resolve module 'black-dither.gif' in /path/to/project/assets/scripts/lib/components/Modal
    resolve module black-dither.gif in /path/to/project/assets/scripts/lib/components/Modal
      looking for modules in /path/to/project/assets
        resolve 'file' black-dither.gif in /path/to/project/assets
          resolve file
            /path/to/project/assets/black-dither.gif.jsx doesn't exist
            /path/to/project/assets/black-dither.gif.js doesn't exist
            /path/to/project/assets/black-dither.gif.less doesn't exist
            /path/to/project/assets/black-dither.gif.css doesn't exist
            /path/to/project/assets/black-dither.gif doesn't exist
        /path/to/project/assets/black-dither.gif doesn't exist (module as directory)
      looking for modules in /path/to/project/node_modules
        resolve 'file' black-dither.gif in /path/to/project/node_modules
          resolve file
            /path/to/project/node_modules/black-dither.gif.jsx doesn't exist
            /path/to/project/node_modules/black-dither.gif.js doesn't exist
            /path/to/project/node_modules/black-dither.gif.less doesn't exist
            /path/to/project/node_modules/black-dither.gif.css doesn't exist
            /path/to/project/node_modules/black-dither.gif doesn't exist
        /path/to/project/node_modules/black-dither.gif doesn't exist (module as directory)
      looking for modules in /path/to/project/vendor
        resolve 'file' black-dither.gif in /path/to/project/vendor
          resolve file
            /path/to/project/vendor/black-dither.gif.jsx doesn't exist
            /path/to/project/vendor/black-dither.gif.js doesn't exist
            /path/to/project/vendor/black-dither.gif.less doesn't exist
            /path/to/project/vendor/black-dither.gif.css doesn't exist
            /path/to/project/vendor/black-dither.gif doesn't exist
        /path/to/project/vendor/black-dither.gif doesn't exist (module as directory)
    [/path/to/project/assets/black-dither.gif.jsx]
    [/path/to/project/assets/black-dither.gif.js]
    [/path/to/project/assets/black-dither.gif.less]
    [/path/to/project/assets/black-dither.gif.css]
    [/path/to/project/assets/black-dither.gif]
    [/path/to/project/assets/black-dither.gif]
    [/path/to/project/node_modules/black-dither.gif.jsx]
    [/path/to/project/node_modules/black-dither.gif.js]
    [/path/to/project/node_modules/black-dither.gif.less]
    [/path/to/project/node_modules/black-dither.gif.css]
    [/path/to/project/node_modules/black-dither.gif]
    [/path/to/project/node_modules/black-dither.gif]
    [/path/to/project/vendor/black-dither.gif.jsx]
    [/path/to/project/vendor/black-dither.gif.js]
    [/path/to/project/vendor/black-dither.gif.less]
    [/path/to/project/vendor/black-dither.gif.css]
    [/path/to/project/vendor/black-dither.gif]
    [/path/to/project/vendor/black-dither.gif]
     @ ./~/css-loader?{"sourceMap":false,"root":"/path/to/project/www","localIdentName":"[name]_[local]--[hash:base64:5]"}!./~/postcss-loader!./~/less-loader?strictMath&strictUnits!./assets/scripts/lib/components/Modal/Modal.less 6:141-168

It's worth noting that a path like scripts/lib/components/Modal/black-dither.gif _does_ work (I've set resolve.root to /path/to/project/assets), but I'm trying to avoid this syntax because it creates ambiguity with node_modules.

---

It appears the problem only occurs when I try to include files in the same directory as the less/css file. i.e. ./xyz does not work but ../xyz does work.

[alexander-akait]

@mnpenner problem still exists?

[mnpenner]

@evilebottnawi Uhh... let me check... it's still a problem in 0.26.4. Will try upgrading css-loader... and still broken in 0.28.9 too.

Here's my full list of dependencies if you want to see that, and my test code:

:local .foo {
    background: url(./bullet_green.png) repeat;
}

[rodeyseijkens]

It is still open, but is this actually still being looked at?

For people interested I was fooling around and I found a way to get around the bug.

Add a backslash in front of the url.

:local .foo {
    background: url('\./test.png');
}

Not sure what is happening here but might it have something to do with a Regex in the code relating to paths?

[elfuego]

Small adjustment here @rodeyseijkens, I succeeded in making this work with just:

.foo {
  background: url('\./test.png');
}

Note the slash in front of the dot...

[rodeyseijkens]

I accidentally copied the background: twice, only the:

Add a backslash in front of the url.

part.

[rodeyseijkens]

So apparently there is a bug in cssnano, it uses normalizeUrl and it strips local urls.
Setting the option of cssnano normalizeUrl: false and that should do the job.

[shotasenga]

Thank you to sharing the solution. I've faced the same problem and normalizeUrl: false dosen't work for my case. But I found another solution that linked below thanks to you. Separate pre-process and minimization is more clear to me.
https://github.com/cssnano/cssnano/issues/616#issuecomment-42372

[alexander-akait]

Problem in modules: false and urls, this behavior will be change in next major release, sorry for big delay