如何在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文件，请将其用于Arguments：

--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 7中使用

参数： --no-cache --update $ FileName $：$ FileParentDir $ / path / to / css / dir / $ FileNameWithoutExtension $ .css

输出路径： $ $ FileParentDir /路径/到/ CSS /目录/ $ $ FileNameWithoutExtension的CSS

找到了。

Answer 5

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