sass - 如何在 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 Env 中使用 node-sass 的任何人，你去吧，

程序：

视窗

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

Linux

/usr/local/bin/node-sass

参数（Windows）：

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

刷新的输出路径（windows）：

$ProjectFileDir$\dist\$FileNameWithoutExtension$.css

Answer 4

在 Phpstorm 7 中使用

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

输出路径：$FileParentDir$/path/to/css/dir/$FileNameWithoutExtension$.css

这发现。

Answer 5

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