Webstorm less watcher failed on sourcemap generating

Hi there,

You must be missing (very likely) the output file name (where generated CSS code will be saved) ...

PhpStorm 2017.3.6 on Windows 10 x64

$ lessc -v
lessc 2.7.3 (Less Compiler) [JavaScript]

Works fine here with these settings:

Arguments:

--no-color --source-map=$FileDir$/$FileNameWithoutExtension$.css.map $FileName$ $FileNameWithoutExtension$.css

or just

--no-color --source-map $FileName$ $FileNameWithoutExtension$.css

Output paths to refresh (I've listed both css and map file so IDE discovers both of them):

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

(The output file will be created next to the source file ... hence no need for specifying the folders etc)

Notice that I've unchecked "Create output file from stdout" as I do specify the target css file in arguments. You may have it enabled (by default). For me it only works this way (since very beginning when I have just started using LESS -- no relation to source maps generation).

The actual command executed (just in case):

File in Project View panel (after running file watcher):

Thanks for reply, Andriy,

Great, looks like I found the problem. The lessc from command like works ok in lessc --no-color --source-map=style.css.map style.less style.css syntax.

More advanced from upper dir:

lessc --no-color --source-map=dist/css/style.css.map src/less/style.less dist/css/style.css

That's from command line. I'll setup Webstorm a little bit later and report the results. That can bu usefull for somebody else.

Thanks for help!

OMG!

Working:

f:\server\OSPanel\domains\dev.modli> lessc --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css

f:\server\OSPanel\domains\dev.modli\skin\frontend\boilerplate\default> lessc --no-color --source-map=dist/css/style.css.map src/less/style.less dist/css/style.css

Not working:

Westorm arguments: --no-color --source-map=$ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css.map $ProjectFileDir$/skin/frontend/boilerplate/default/src/less/style.less
Westorm out: $ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css

Westorm arguments: --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less
Westorm out: F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css

 Log (the same):

cmd.exe /D /C call C:/Users/max.a/AppData/Roaming/npm/lessc.cmd --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less
TypeError: Path must be a string. Received undefined
at assertPath (path.js:28:11)
at Object.dirname (path.js:715:5)
at render (C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:122:34)
at C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:532:9
at Object.<anonymous> (C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:535:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)

Process finished with exit code 1

The method from stoneage that works:

CMD file:

C:\Users\max.a\AppData\Roaming\npm\lessc.cmd --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css

The method from stoneage that works:

CMD file:

C:\Users\max.a\AppData\Roaming\npm\lessc.cmd --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css

Debugging is terrible. Nothing comparable with grunt-less

Debugging style like "looks like something happpened".

Final absent bracket debug:

ParseError: Unrecognised input. Possibly missing something in F:\server\OSPanel\domains\dev.modli\skin\frontend\boilerplate\default\src\less\layout\_base.less on line 19, column 1:
18
19

>The method from stoneage that works:

Without seeing the project structure and what you have tried (to keep all parameters in File Watcher) -- no idea why you could not make it work that way.

>Debugging is terrible. Nothing comparable with grunt-less

That's the output provided by the lessc itself. File Watcher just runs the program with provided parameters.

Do not use "Immediate file synchronisation"; allow to run watcher only when you are ready to save the file. I pretty much never see such error.

>Westorm arguments: --no-color --source-map=$ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css.map $ProjectFileDir$/skin/frontend/boilerplate/default/src/less/style.less

the error occurs because you don't pass the path to output file (.css) in Arguments - see https://github.com/less/less.js/issues/2897, https://github.com/less/less.js/issues/3117 and tickets linked to them.

You should have passed dist/css/style.css in Arguments field. Like:

--no-color --source-map=$ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css.map $ProjectFileDir$/skin/frontend/boilerplate/default/src/less/style.less $ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css

BTW, can I setup grunt less compiler to use with Webstorm? I like it debugging very much.

Yes, you can run Grunt Less from the tasks tree in Grunt tool window (https://www.jetbrains.com/help/webstorm/2018.1/using-grunt-task-runner.html#ws_grunt_running_tasks_from_tasks_tree) or via the corresponding Run configuration (https://www.jetbrains.com/help/webstorm/2018.1/using-grunt-task-runner.html#ws_grunt_run_debug_task_by_run_configuration). Of course, you need to have Grunt + needed Grnnt modules installed and configured for your project