jberculo jberculo - 2 months ago 9
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


The
app.sass
is in the
/sass
directory, and when I change something there, the compiler automatically runs. But it puts the
app.css
and
app.css.map
in the
/sass
directory. Instead I like to have have it save to the
/css
directory.

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>
<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 />
</TaskOptions>
</component>
</project>


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

Answer

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.

Comments