How to setup output path to compiled css files using `vscode live sass compiler extension` in windows10?

Question

I failed to run node-sass(node module), where I was able to setup path for input extensions.scss files and output files generated after compiling to dist/ folder.

Now, I am using vscode extension live sass compiler,

at bottom bar, when I clicked Watched Sass then it compiled automatically scss file to css but in same folder.

main.scss is compiled to main.css.

problem is that I wanted to create that compiled css file in other folder .i.e. in output folder ./dist/.

I have manually created main.css file in ./dist/folder.

How can I setup path to source and destination files in that extension?

Answer 1

I have had the same issue when I started implementing SMACSS methodology to my projects. This is the solution I have tried. hope it will help you.

Go to VScode User Settings --> Select "Live Sass Compiler Config --> add

"liveSassCompile.settings.formats": [{         "format": "expanded",         "extensionName": ".css",         "savePath": "./css"     }] 

Answer 2

Go to VScode menu- file>preferences>settings>extension>live sass copile config>edit in settings.json

and paste it code >>

  "liveSassCompile.settings.formats": [     {       "format": "expanded",       "extensionName": ".css",       "savePath": "~/../css/"     }   ]