jberculo jberculo - 1 month ago 5x
Sass (Sass) Question

Can't get Sass compiler to output in other directory than the one app.sass resides in

System: Windows 10 64bit, PhpStorm 2016.2 (the backslashes are not the problem, they are in the screenshot, but not in my actual code anymore)

This is my file structure

/css -> css files
/sass -> sass files

is in the
directory, and when I change something there, the compiler automatically runs. But it puts the
in the
directory. Instead I like to have have it save to the

This is my watcherTask.xml

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions">
<TaskOptions isEnabled="true">
<option name="arguments" value="--no-cache --update $FileName$:$FileNameWithoutExtension$.css" />
<option name="checkSyntaxErrors" value="true" />
<option name="description" value="Compiles .sass files into .css files" />
<option name="exitCodeBehavior" value="ERROR" />
<option name="fileExtension" value="sass" />
<option name="immediateSync" value="true" />
<option name="name" value="Sass" />
<option name="output" value="$FileParentDir$/css/$FileNameWithoutExtension$.css:$FileParentDir$/css/$FileNameWithoutExtension$.css.map" />
<option name="outputFilters">
<array />
<option name="outputFromStdout" value="false" />
<option name="program" value="C:/Ruby22/bin/sass.bat" />
<option name="scopeName" value="Project Files" />
<option name="trackOnlyRoot" value="true" />
<option name="workingDir" value="$FileDir$" />
<envs />

Any clue about what I am missing here?

Update: As requested, a screenshot of the watcher:
The field "output paths to refresh" corresponds to the "output" option.
The field "arguments" to the eh... arguments option.

My file watcher


The arguments option determines where the file source and target are:

--no-cache --update Source:Target

The default is

--no-cache --update $FileName$:$FileNameWithoutExtension$.css

which I then had to change to

--no-cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

This causes the system to save both the css and the css.map to the right folder.

Thanks @LazyOne for pointing this out.