How to setup output path to compiled css files using `vscode live sass compiler extension` in windows10? - Ayush Shrestha || UI/UX || Front-end || Angular || React || Wordpress

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

Problem?


2

I failed to run node-sass(node module), where I was able to setup path for input extensions.scssfiles 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.

enter image description here

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?

Solutions


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.

enter image description here

Go to VScode User Settings –> Select “Live Sass Compiler Config –> add

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

MORE DETAILS https://stackoverflow.com/questions/51696892/how-to-setup-output-path-to-compiled-css-files-using-vscode-live-sass-compiler

or on Visual Studio code

https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md


https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

CORRECTIONS

{ “liveServer.settings.donotVerifyTags”: true, “workbench.editor.highlightModifiedTabs”: true, “editor.wordWrap”: “on”, “liveSassCompile.settings.formats”: [{ “format”: “compressed”, “extensionName”: “.css”, “savePath”: “./css” } ], “explorer.confirmDelete”: false }

Related Blogs

Leave a Reply