Sass filewatcher for webstorm

我想在NodeJS项目中使用sass，这是我用nodejs安装的库

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

我正在使用webstorm这个项目，我不能让Sass文件监视器工作。

即使在我保存filewatcher并单击“确定”后，filewatcher不起作用。 当我打开设置来检查什么是错误的filewatcher已被取消选中。 这里是filewatcher设置：

node-sass模块作为全局模块安装，因此node-sass命令可以工作。

Answer 1

最明确的path.cmd是错误的，因为莱娜和懒惰的build议。 每当观察者在Web / Phpstorm中取消选中它可能是因为无效的path。 如果你仍然有节点sass的麻烦，你总是可以去Ruby的方式。

1. 下载并安装Ruby for Win，
2. 通过命令提示符通过gem install sass安装Sass，
3. 在Web / Phpstorm中，将“Program”path放到sass.bat（记得node-sass.cmd？），例如C:\Ruby200\bin\sass.bat

Answer 2

1. 您需要在Program字段中指定node-sass.cmd的完整path（如提到的@LazyOne）
2. 指定的参数不适用于node-sass – 它们只适用于标准的SASS编译器。 这是一个节点sass选项列表：

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

[options] <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 

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

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

Answer 3

首先，您需要安装nodejs，然后使用npm install -g node-sass。 之后，设置以下内容到webstorm scss filewatcher：

• 程序：node-sass.cmd
• 参数：$ FileName $ $ FileNameWithoutExtension $ .css
• 工作目录：$ FileDir $
• 输出path为：$ FileNameWithoutExtension $ .css

Answer 4

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

Phpstorm文件监视器不能很好地运行在node-sass （在Phpstorm 8.0.1窗口中testing）

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

Answer 5

Phpstorm 8.0.3 Windows 7（x64）全局安装的node-sass工作示例

除了指向.cmd的原始post的另一个关键问题是replace：使用正斜杠，节点不理解冒号语法，而是期望正斜杠而不是“参数”框。 从下面的链接find答案

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

注意在上面的例子中，你需要指向cmd文件，例如“global npm packages / node-sass.cmd”

他也有rubysass的开关，例如–no-cache，不会像lena指出的那样和节点一起工作，sass交换机应该工作正常，但是没有经过testing

这是一个工作configuration

Answer 6

这里的答案非常有帮助，非常接近我所需要的。 我希望应用程序创build地图文件，并将其与CSS文件捆绑在一起。 这里是为我工作的设置。 我希望这可以帮助别人！

• 显示控制台：[错误]
• [x]立即文件同步
• [x]只跟踪根文件
• 无论语法错误如何触发观察器
• 文件types：Sass
• 范围：项目文件
• 程序：/ usr / local / bin / node-sass
• 参数：–source-map true –indented-syntax –output-style压缩$ FileName $ $ FileNameWithoutExtension $ .css
• 工作目录：$ FileDir $
• 环境variables：
• 输出path刷新：$ FileNameWithoutExtension $ .css：$ FileNameWithoutExtension $ .css.map
• []从标准输出创build输出文件

Answer 7

node-sass只需要$FileName$ $FileNameWithoutExtension$.css testing并在WebStorm 11

程序参数需要bin / exe的完整path，即使它是全局可用的。 在我的情况下， /usr/local/bin/node-sass ，在你的情况下，它将是node-sass.cmd的path。

节点sass cli用法

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

节点sass 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 8

我通过npm（npm install node-sass）安装了node-sass，实际将scss为css 。 在问题中，唯一的问题就是node-sass.cmd文件的位置 。 通过npm进行安装时，应该将.cmd文件安装在node_modules\.bin文件夹中。

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

另外，根据Lena的回答，输出的论点应该是：

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