如何在PhpStorm中正确设置scss文件观察器？

Question

我有它工作,但有了这些设置,它需要一段时间,直到PhpStorm的变化.如果我删除../css/了参数字符串的一部分,那么它会在scss文件所在的同一目录中创建/更新css文件,但会立即执行.我究竟做错了什么？

我在OS X 10.8.3上使用PhpStorm 6.0.1

Answer 1

正如在上一个答案中提到的那样,您必须相应地设置"输出路径"选项.喜欢:

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

Working directory: $FileDir$

Output Paths: $FileParentDir$/css/$FileNameWithoutExtension$.css

现在,输出路径与scss输出目录匹配,因此IDE知道在哪里查找输出以及它的外观

Answer 2

我建议使用node-sass,速度提高10倍以上

 npm install -g node-sass

计划:

/usr/local/bin/node-sass

参数:

$FileName$ $FileNameWithoutExtension$.css

输出路径:

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

编辑:

如果要压缩css文件,请将其用于参数:

--output-style compressed $FileName$ $FileNameWithoutExtension$.css  

Answer 3

对于任何人在Windows环境中使用node-sass,这里你去,

程序:

视窗

C:\Users\%username%\AppData\Roaming\npm\node-sass.cmd

Linux的

/usr/local/bin/node-sass

参数(Windows):

$FileName$ $ProjectFileDir$\dist\$FileNameWithoutExtension$.css

刷新(窗口)的输出路径:

$ProjectFileDir$\dist\$FileNameWithoutExtension$.css

Answer 4

手册中：“在输出路径文本框中，指定转译器存储其输出的文件：生成的源代码、源映射和依赖项。根据此设置，PhpStorm 检测通过转译生成的文件。”