Import url tries to resolve directory

[josephfinlayson]

Upon trying to @import "ProximaNova-font.css";

I get this error:

./~/css-loader?importLoaders=2&localIdentName=[path][name]---[local]---[hash:base64:5]&url=false!./~/postcss-loader!./~/less-loader!./assets/styles/less/common/ProximaNova-font.css
Module build failed: Cannot resolve 'file' or 'directory' .///hello.myfonts.net/count/2da629.less in /home/joe/www/frontend/assets/styles/less/common
 @ /home/joe/www/frontend/assets/styles/less/common/ProximaNova-font.css (line 39, column 0)
 near lines:
   /* @import must be at top of file, otherwise CSS will not work */
   @import url('//hello.myfonts.net/count/2da629');

Error: Cannot resolve 'file' or 'directory' .///hello.myfonts.net/count/2da629.less in /home/joe/www/frontend/assets/styles/less/common
 @ /home/joe/www/frontend/assets/styles/less/common/ProximaNova-font.css (line 39, column 0)
 near lines:
   /* @import must be at top of file, otherwise CSS will not work */
   @import url('//hello.myfonts.net/count/2da629');

    at formatLessRenderError (/home/joe/www/frontend/node_modules/less-loader/index.js:173:12)
    at /home/joe/www/frontend/node_modules/less-loader/index.js:68:19
    at /home/joe/www/frontend/node_modules/less/lib/less/render.js:26:35
    at /home/joe/www/frontend/node_modules/less/lib/less/parse.js:62:33
    at Object.finish [as _finish] (/home/joe/www/frontend/node_modules/less/lib/less/parser/parser.js:180:28)
    at Object.ImportVisitor._onSequencerEmpty (/home/joe/www/frontend/node_modules/less/lib/less/visitors/import-visitor.js:35:14)
    at ImportSequencer.tryRun (/home/joe/www/frontend/node_modules/less/lib/less/visitors/import-sequencer.js:50:14)
    at Object.ImportVisitor.run (/home/joe/www/frontend/node_modules/less/lib/less/visitors/import-visitor.js:29:25)
    at Object.Parser.parse (/home/joe/www/frontend/node_modules/less/lib/less/parser/parser.js:189:22)
    at Object.parse (/home/joe/www/frontend/node_modules/less/lib/less/parse.js:61:18)
 @ ./~/css-loader?importLoaders=2&localIdentName=[path][name]---[local]---[hash:base64:5]&url=false!./~/postcss-loader!./~/less-loader!./assets/styles/less/common/common.less 3:10-273

I'm using the less loader in conjunction with the css module loader: my loader config is the following:

return 'style-loader!css-loader?importLoaders=2&localIdentName=[path][name]---[local]---[hash:base64:5]&url=false!postcss-loader!less-loader'

[josephfinlayson]

The offending line in ProximaNova.css is @import url('//hello.myfonts.net/count/2da629');

[janv]

@josephfinlayson I am running into a similar problem, trying to combine css?modules, postcss and less loaders. Have you found a solution yet?

[josephfinlayson]

@janv What worked for me was to give the file an extension:

 @import url('//hello.myfonts.net/count/2da629.css');

[jhnns]

Can you confirm that this is a less-loader issue? I've added tests that demonstrate that @import url('//hello.myfonts.net/count/2da629'); will just be ignored by the less-loader

[john-ko]

@jhnns I added @import url('//hello.myfonts.net/count/2da629'); to test/fixtures/less/import-url.less and ran tests and it failed.

test/fixtures/less/import-url.less

@import url("http://fonts.googleapis.com/css?family=Roboto:300,400,500");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
@import url("//fonts.googleapis.com/css?family=Roboto:300,400,500");
@import url("//hello.myfonts.net/count/2da629");

and the error was

FAIL  test/index.test.js
  ● should not try to resolve import urls

    Module build failed:

    @import url("//fonts.googleapis.com/css?family=Roboto:300,400,500");
    @import url("//hello.myfonts.net/count/2da629");
    ^
    Can't resolve './//hello.myfonts.net/count/2da629.less' in '...

@josephfinlayson 's solution works as well as
@import url("//hello.myfonts.net/count/2da629?css")

[leopoldkristjansson]

@josephfinlayson's solution worked for me too for google fonts. Adding .css at the end.

@import url('https://fonts.googleapis.com/css?family=Lora|Open+Sans:400,400i,700.css');

[xresidentx]

Was facing the same issue,
Solved using import options http://lesscss.org/features/#import-atrules-feature-import-options

changed
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
to
@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

[humbertodosreis]

@xresidentx, your solution worked for me.

[albertpak]

@xresidentx 🎊🎊🎊

[Ts8060]

@xresidentx Thanks for solution. It Works

[alexkar13]

@xresidentx thank youuuuu!

[alexander-akait]

Answer above #67 (comment), also we add tests for these cases