用于webstorm的Sass filewatcher

Question

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

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

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

即使我保存了filewatcher并单击＆＃34; Ok＆＃34;，filewatcher也不起作用。当我打开设置以检查filewatcher未选中的错误时。以下是filewatcher设置：

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

Answer 1

1. 您需要在“程序”字段中指定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

大多数肯定是.cmd的路径是错误的，因为lena和lazy建议。每当观察者在Web / Phpstorm中取消它可能是因为路径无效。 如果你仍然遇到node-sass的麻烦，你可以随时使用Ruby方式。

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

Answer 4

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

Phpstorm文件观察器与node-sass无法很好地工作（在Phpstorm 8.0.1窗口中测试）

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

Answer 5

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

除了指向.cmd之外，原始帖子中的另一个关键问题是替换：使用正斜杠，节点不理解冒号语法，并且期望在参数框中使用正斜杠。从以下链接找到答案

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

请注意，在上面的Windows示例中，您需要指向cmd文件，即＆＃34;全局npm packages / node-sass.cmd的路径＆＃34;

他还有红宝石sass的开关，例如--no-cache，它不会像lena指出的那样与节点一起工作，节点sass开关应该可以正常工作但是没有经过测试

这是一个有效的配置

Answer 6

node-sass只需要$FileName$ $FileNameWithoutExtension$.css 经过测试，并且可以在WebStorm 11中使用

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

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

这里的答案非常有用，非常接近我的需要。我希望应用程序创建地图文件并将其与css文件捆绑在一起。以下是适合我的设置。我希望这有助于其他人！

• 显示控制台：[错误]
• [x]立即文件同步
• [x]仅跟踪根文件
• []无论语法错误如何，都会触发观察者
• 文件类型：Sass
• 范围：项目文件
• 程序：/ usr / local / bin / node-sass
• 参数： - source-map true --indented-syntax --output-style compressed $ FileName $ $ FileNameWithoutExtension $ .css
• 工作目录：$ FileDir $
• 环境变量：
• 要刷新的输出路径：$ FileNameWithoutExtension $ .css：$ FileNameWithoutExtension $ .css.map
• []从stdout
创建输出文件

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

Answer 9

我有同样的问题。 IntelliJ的默认配置不起作用。

这是可行的。您可以看到以黄色标记的其他配置。

Answer 10

  

PHP风暴版本2018.02

我无法让Filewatcher在Günay的帖子中生成css.map文件， 所有其余的帖子对我来说都很好，所以我使用的是

安装

全局安装node-sass：npm install -g node-sass

设置：

1. 程序C:\Users\User\AppData\Roaming\npm\node-sass.cmd

2. 参数--source-map true $FileName$ $FileNameWithoutExtension$.css

3. 刷新$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

的输出路径

4. 工作目录$FileDir$

希望这会有所帮助