CODEWITHSUNDEEP
sasswebstorm
Melissa Stewart
Melissa Stewart

Reputation: 3605

Can't compile SCSS inside of WebStorm

I'm using node-sass for compiling scss files to css inside of WebStorm.

These are my settings inside my directory.

Program:

/usr/local/bin/node-sass

Arguments:

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

Output Paths to refresh:

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

I want the css file to be written in a css directory under root. However this is the compilation error I get of the 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

Upvotes: 0

Views: 1394

Answers (2)

kapreski
kapreski

Reputation: 771

to anyone facing the same issue and the above answer didn't work with your sass version or if you are using Dart Sass try omitting this part of the argument --source-map=true -o and format the macros like so:

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

Upvotes: 0

lena
lena

Reputation: 93728

Neither --compile nor --map are listed among available options at https://github.com/sass/node-sass#command-line-interface.

The following settings work fine for me when using the most recent node-sass version (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$

Upvotes: 5

Related Questions