无法在 WebStorm 中编译 SCSS

Question

我正在使用 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文件写在root下的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

Answer 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$

Answer 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$

无法在 WebStorm 中编译 SCSS

Can't compile SCSS inside of WebStorm

sass

webstorm