用于webstorm的Sass filewatcher

Question

我试图在NodeJS项目中使用sass,这是我用nodejs安装的库

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

我正在使用webstorm进行此项目,我无法让Sass文件观察器工作.

即使在我保存filewatcher并单击"确定"后,filewatcher也无法正常工作.当我打开设置以检查文件识别器未选中的错误时.以下是filewatcher设置:

node-sass模块作为全局模块安装,因此node-sass命令有效.

Answer 1

1. 您需要在Program字段中指定node-sass.cmd的完整路径(如提到的@LazyOne)
2. 指定的参数不适用于node-sass - 它们仅适用于标准SASS编译器.以下是node-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

使用此类设置,生成的.css文件将放置在原始.scss附近.如果您想将结果文件放入不同的文件夹,请尝试使用-o选项.喜欢:

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

Answer 2

首先,您需要安装nodejs然后使用npm install -g node-sass.之后设置了关于webstorm scss filewatcher的东西:

• 程序:node-sass.cmd
• 参数:$ FileName $ $ FileNameWithoutExtension $ .css
• 工作目录:$ FileDir $
• refs的输出路径:$ FileNameWithoutExtension $ .css

Answer 3

正如lena和lazy所建议的那样，最肯定的方法是.cmd路径错误。每当观察者取消登录Web / Phpstorm时，可能是由于路径无效。如果您仍然无法使用node-sass，则可以始终使用Ruby。

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