萨斯filewatcher为webstorm

Question

我想在一个项目的NodeJS使用青菜，这是我的NodeJS

https://www.npmjs.org/package/node-sass

我使用webstorm这个项目安装库，我不能让萨斯文件观察员工作。

即使在我保存filewatcher，然后单击 “确定” 后，filewatcher不起作用。当我打开设置以检查有什么问题时，filewatcher未被选中。下面是filewatcher设置：

节点 - 萨斯模块安装为一个全球性的模块，这样的节点萨斯命令作品。

Answer 1

绝对路径.cmd是错误的，因为莱娜和懒惰的建议。每当观察者在Web/Phpstorm中取消选中时，可能是因为路径无效。 如果您仍然遇到node-sass问题，您可以随时使用Ruby方式。

1. 下载并安装Ruby为Win，
2. 通过与gem install sass命令提示符下安装萨斯，
3. 在网络/ Phpstorm把 “纲要” 路径sass.bat（记得节点sass.cmd？）例如C:\Ruby200\bin\sass.bat

Answer 2

1. 你需要指定一个完整路径，在程序领域节点sass.cmd（如@LazyOne提到）
2. 指定的参数将不与节点萨斯工作 - 他们只适用于标准SASS编译器。这里是一个节点萨斯选项列表：

Usage: node C:\Users\USER\AppData\Roaming\npm\node_modules\node-sass\bin\node-sass 

[选项] <input.scss> [<output.css>]

Options: 
    --output-style  CSS output style (nested|expanded|compact|compressed) [default: "nested"] 
    --source-comments Include debug info in output (none|normal|map)   [default: "none"] 
    --include-path  Path to look for @import-ed files      [default: "C:\\Users\\USER\\AppData\\Roaming\\npm"] 
    --watch, -w  Watch a directory or file 
    --output, -o  Output css file 
    --stdout   Print the resulting CSS to stdout 
    --help, --help  Print usage info 

最简单的设置如下所示：

Program: C:\Users\USER\AppData\Roaming\npm\node-sass.cmd 
Arguments: $FileName$ $FileNameWithoutExtension$.css 
Working directory: $FileDir$ 
Output paths to refresh: $FileNameWithoutExtension$.css 

'Create output from stdout' should be off 

W如此设置，生成的.css文件将放置在原始.scss附近。如果您想将结果文件放入不同的文件夹，请尝试使用-o选项进行播放。像：

Arguments: $FileName$ -o $ProjectFileDir$/css/$FileNameWithoutExtension$.css 
Output paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css 

Answer 3

我知道这个问题已经回答了，这是对未来的访客，

Phpstorm文件观察家不node-sass（在Phpstorm 8.0测试工作得很好。1个窗）

而是安装node-sass-cli和使用以下设置

Answer 4

Phpstorm 8.0.3的Windows 7（x64）的节点萨斯全球安装工作例如从原岗位

另一个关键问题除了指向.cmd的内容正在替代：使用正斜杠，节点不理解冒号语法，而是期望正斜杠代替Arguments框。从下面的链接在上面的例子中

http://www.wonderlandlabs.com/blog/scss_in_webstorm

注意找到答案，你需要指向CMD文件的IE窗口“路径全球NPM包/节点sass.cmd”

而且他有如--no缓存，不会与节点工作作为莉娜指出，该节点萨斯开关应该可以正常工作，但还没有测试

这里开关红宝石SASS是一个工作配置

Answer 5

节点萨斯要求不外乎$FileName$ $FileNameWithoutExtension$.css测试和WebStorm 11

工作程序参数需要的完整路径的bin/EXE不过，即使它全局可用。在我的情况下，/usr/local/bin/node-sass，在你的情况下，它将通往node-sass.cmd的路径。

节点青菜CLI使用

node-sass [options] <input> [output] cat <input> | node-sass > output 

节点青菜CLI参数

-w, --watch    Watch a directory or file 
-r, --recursive   Recursively watch directories or files 
-o, --output    Output directory 
-x, --omit-source-map-url Omit source map URL comment from output 
-i, --indented-syntax  Treat data from stdin as sass code (versus scss) 
-q, --quiet    Suppress log output except on error 
-v, --version    Prints version info 
--output-style    CSS output style (nested | expanded | compact | compressed) 
--indent-type    Indent type for output CSS (space | tab) 
--indent-width    Indent width; number of spaces or tabs (maximum value: 10) 
--linefeed     Linefeed style (cr | crlf | lf | lfcr) 
--source-comments   Include debug info in output 
--source-map    Emit source map 
--source-map-contents  Embed include contents in map 
--source-map-embed   Embed sourceMappingUrl as data URI 
--source-map-root   Base path, will be emitted in source-map as is 
--include-path    Path to look for imported files 
--follow     Follow symlinked directories 
--precision    The amount of precision allowed in decimal numbers 
--importer     Path to .js file containing custom importer 
--functions    Path to .js file containing custom functions 
--help      Print usage info 

Answer 6

首先，你需要安装和的NodeJS然后使用NPM安装-g节点萨斯。该集后下面的事情webstorm SCSS filewatcher：

• 计划：节点sass.cmd
• 参数：$文件名$ $ $ FileNameWithoutExtension名为.css
• 工作目录：$ FILEDIR $
• 输出路径对于裁判：$ FileNameWithoutExtension $的.css

Answer 7

我安装node-sass通过NPM（NPM安装节点SASS）实际成绩单scss到css。正如问题所示，配置唯一的问题是node-sass.cmd文件的位置。通过npm进行安装时，应该在node_modules\.bin文件夹中安装.cmd文件。

在我的情况下，从节点sass文件（node_modules\node-sass\bin\node-sass）到（node_modules\.bin\node-sass.cmd）。

而且，按照莉娜的回答，输出参数应该是：

参数：$FileName$ -o $ProjectFileDir$/css/$FileNameWithoutExtension$.css

Answer 8

的答案在这里是非常有益的，非常接近我所需要的。我希望应用程序创建地图文件并将它们与CSS文件捆绑在一起。以下是适用于我的设置。我希望这可以帮助别人！

• Show调音：[错误]
• [X]即时文件同步
• [X]轨道只有root文件
• []触发观察家不管语法错误
• 文件类型：萨斯
• 范围：工程文件
• 程序：/ usr/local/bin/node-sass
• 参数：--source-map真正--indented语法--output式压缩文件名$ $ $ $ FileNameWithoutExtension名为.css
• 工作目录：$ FILEDIR $
• 环境变量：
• 输出路径刷新：$ FileNameWithoutExtension $的CSS：$ FileNameWithoutExtension $ .css.map
• []从标准输出创建输出文件