[英]How do I correctly setup the scss file watcher in PhpStorm?
I have it working, but with these settings it takes quite a while until the change comes through in PhpStorm. 我有它工作,但有了这些设置,它需要一段时间,直到PhpStorm的变化。 If I get rid of the
../css/
part of the argument string then it creates/updates the css file in the same directory as the scss file is in, but does it immediately. 如果我摆脱了参数字符串的
../css/
部分,那么它会在scss文件所在的同一目录中创建/更新css文件,但会立即执行。 What am I doing wrong? 我究竟做错了什么?
I'm using PhpStorm 6.0.1 on OS X 10.8.3 我在OS X 10.8.3上使用PhpStorm 6.0.1
as it's mentioned in the previous answer, you have to set up the Output paths option accordingly. 正如在上一个答案中提到的那样,您必须相应地设置“输出路径”选项。 Like:
喜欢:
Arguments: --no-cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output Paths: $FileParentDir$/css/$FileNameWithoutExtension$.css
Now output paths matches the scss output directory, so that the IDE knows where to look for output and what it looks like 现在输出路径与scss输出目录匹配,以便IDE知道在哪里查找输出以及它的外观
I recommend using node-sass it's 10+ times faster 我建议使用node-sass , 速度提高10倍以上
npm install -g node-sass
Program : 计划:
/usr/local/bin/node-sass
Arguments : 参数:
$FileName$ $FileNameWithoutExtension$.css
Output Paths : 输出路径:
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
Edit : 编辑:
If you want the css file compressed, use that for the Arguments : 如果要压缩css文件,请将其用于参数:
--output-style compressed $FileName$ $FileNameWithoutExtension$.css
For anyone uses node-sass in Windows Env, here you go, 对于任何人在Windows环境中使用node-sass,这里你去,
Program:
程序:
Windows 视窗
C:\Users\%username%\AppData\Roaming\npm\node-sass.cmd
Linux Linux的
/usr/local/bin/node-sass
Arguments (Windows):
参数(Windows):
$FileName$ $ProjectFileDir$\dist\$FileNameWithoutExtension$.css
Output paths for refresh(windows):
刷新(窗口)的输出路径:
$ProjectFileDir$\dist\$FileNameWithoutExtension$.css
In Phpstorm 7 use 在Phpstorm 7中使用
Arguments: --no-cache --update $FileName$:$FileParentDir$/path/to/css/dir/$FileNameWithoutExtension$.css 参数: - no-cache --update $ FileName $:$ FileParentDir $ / path / to / css / dir / $ FileNameWithoutExtension $ .css
Output Paths: $FileParentDir$/path/to/css/dir/$FileNameWithoutExtension$.css 输出路径:$ FileParentDir $ / path / to / css / dir / $ FileNameWithoutExtension $ .css
This found. 这发现了。
从手册:“在输出路径文本框中,指定转换器存储其输出的文件:生成的源代码,源映射和依赖项。 基于此设置,PhpStorm检测通过转换生成的文件 。”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.