无法在 WebStorm 中编译 SCSS答案

【问题标题】：Can't compile SCSS inside of WebStorm无法在 WebStorm 中编译 SCSS
【发布时间】：2017-12-03 16:53:29
【问题描述】：

我正在使用 node-sass 将 scss 文件编译为 WebStorm 中的 css。

这些是我在我的目录中的设置。

程序：

/usr/local/bin/node-sass

参数：

--output $ProjectFileDir$/css/ --compile --map $FileName$

要刷新的输出路径：

$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.map

我希望将 css 文件写入根目录下的 css 目录中。然而，这是我得到的 WebStorm 的编译错误

/usr/local/bin/node-sass --output /Users/melissa/Dropbox/codepen/sample/core-fe/css/ --compile --map styles.scss
path.js:28
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at Object.extname (path.js:1471:5)
    at getOptions (/usr/local/lib/node_modules/node-sass/bin/node-sass:186:40)
    at Object.<anonymous> (/usr/local/lib/node_modules/node-sass/bin/node-sass:368:15)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function.Module.runMain (module.js:676:10)

Process finished with exit code 1

【问题讨论】：

TBH：不知道。我的 node-sass（在 Windows 上运行）没有将 --compile 或 --map 显示为可能的选项（通过 npm 安装；node-sass v4.7.2（包装器；JavaScript）；libsass v3.5.0.beta.2）。我将它用于“参数”：--source-map true --output . $FileName$ 和 $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map 用于“刷新的输出路径”字段（编译后的文件被放置在源旁边的同一文件夹中）。

标签： sass webstorm

【解决方案1】：

--compile 和 --map 均未列在https://github.com/sass/node-sass#command-line-interface 的可用选项中。

在使用最新的 node-sass 版本 (4.7.2) 时，以下设置对我来说可以正常工作：

Arguments: $FileName$ --source-map=true -o $ProjectFileDir$/css
Output Paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
Working directory: $FileDir$

【讨论】：

【解决方案2】：

对于面临相同问题且上述答案不适用于您的 sass 版本的任何人，或者如果您使用的是 Dart Sass，请尝试省略这部分参数 --source-map=true -o 并像这样格式化宏：

Arguments: $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css
Output Paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
Working directory: $FileDir$

【讨论】：