Search code examples
webstorm

WebStorm. How to make IDE compile less files from src/less/... to dist/css/...?

By default the .less files are compiled into the same directory.

But I want IDE compile to .less only from src/less/ and save .css to dist/css/ folder.

enter image description here

How can I do that?

Maybe I can mark folders as Sources and Destination? And then use FileDirRelativeToSourcepath?

UPDATE.

In older versions there was a "Mark as Sources".

enter image description here

In current version there is no this mark. enter image description here

Why current version haven't this mark?

Solution

    1. To have only files from src/less/ watched for changes, please create a custom scope in Settings | Appearance & Behavior | Scopes with only files from src/less/ included, and set this scope to your file watcher

    2. To save output to a different folder, you need to modify 'Output paths to refresh' option (and, optionally, Arguments field - if you don't like creating output from stdout).

    With stdout:

    Arguments: --no-color $FileName$
Working dir: $FileDir$
Output paths to refresh: $ProjectFileDir$/dist/css/$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css

Create output from stdout: checked

    Without stdout:

    Arguments: --no-color $FileName$ $ProjectFileDir$/dist/css/$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css
    Working dir: $FileDir$
    Output paths to refresh: $ProjectFileDir$/dist/css/$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css

    Create output from stdout: unchecked

    Screenshot with settings: enter image description here