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

【问题标题】：How do I correctly setup the scss file watcher in PhpStorm?如何在 PhpStorm 中正确设置 scss 文件观察器？
【发布时间】：2013-05-04 04:18:45
【问题描述】：

我可以使用它，但是使用这些设置需要很长时间才能在 PhpStorm 中完成更改。如果我去掉参数字符串的 ../css/ 部分，那么它会在与 scss 文件所在的目录相同的目录中创建/更新 css 文件，但会立即执行。我做错了什么？

我在 OS X 10.8.3 上使用 PhpStorm 6.0.1

【问题讨论】：

标签： sass phpstorm

【解决方案1】：

正如上一个答案中提到的，您必须相应地设置输出路径选项。喜欢：

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

Working directory: $FileDir$

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

现在输出路径与 scss 输出目录匹配，以便 IDE 知道在哪里查找输出以及它的样子

【讨论】：

谢谢，不过问了没多久我就明白了。上一个答案是我自己的。

【解决方案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

【讨论】：

SASS 官方网站说 npm 版本是最慢的实现。它说“但是，请注意，这将安装 Sass 的纯 JavaScript 实现，它的运行速度比此处列出的其他选项要慢一些”

【解决方案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

【讨论】：

如果您需要 sourcemap，只需将--sourceMap=$FileDir$ 添加到Arguments 的末尾即可。这将告诉 node-sass 将 sourcemap 文件输出到包含您的 scss 文件的同一文件夹。
嗨，我正在使用 Mac。我在 phpstorm 2016.1 中为 .scss 做了一个文件监视，使用 scss 编译器，效果很好。由于 node-sass 速度更快，所以我全局安装了 node-sass，并将程序设置从“/usr/bin/scss”更改为“/usr/local/bin/node-sass”。但它在 phpstorm 中不起作用，相反，它总是显示微调器，提醒我它正在编译。你知道如何解决这个问题吗？
@Ng2-Fun 我对 OSX 不熟悉，但路径似乎不同？ /usr/local/lib/node_modules/node-sass ?
当我执行“which node-sass”时，它显示的内容与您为 Linux 发布的内容相同。当我更改为/usr/local/lib/node_modules/node-sass 时，它告诉我权限被拒绝。您使用的是哪个 PHPStorm 版本？

【解决方案4】：

在 Phpstorm 7 中使用

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

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

这个找到了。

【讨论】：

【解决方案5】：

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

【讨论】：