0

I have this folder structure:

sass/main.sass

css/main.css

js/...

img/...

I want the sass output to go to the css folder, but each time I run sass watcher it creates a new css file within the sass directory among sass files.

user15328189
  • 55
  • 2
  • 8
  • 1
    look this answer: https://stackoverflow.com/questions/42569886/sass-watch-folder-then-output-to-css-file-in-current-directory – corsaro Mar 13 '21 at 11:11
  • 1
    How do you compile btw. what compiler do you use? Original SASS (terminal only)? Or by a compiler included by a package / node / editor? – Brebber Mar 14 '21 at 11:43
  • @Brebber I use an extension called Live Sass Compiler in VS Code. – user15328189 Mar 14 '21 at 22:11

2 Answers2

2

Thx for information about using 'Live SASS Compiler' in VS Code.

To set special otuput pathes to your project you need to add the settings for output pathes to the settigns.json of your project:

File: `projectDIR/.vscode/settings.json'

Example for setting the save pathes to output directory:


"settings": {


    // output: generate files to ...
    // ~ = path starts relative from scss-file
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../assets"
        },
        // ad a compressed version
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../assets"
        }

        // optional: add more outputs ...

    ], 

}

See also official example in web: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

Additional hint:
VERSION OFF 'LIVE SASS COMPILER' MAY BE OUTDATED

The actual commmon used Extension Live Sass Compiler is not longer supported (for years now). It uses an outdated SASS Version. The most recent features like @use are not supported in that version. You use that outdated version if author is 'Ritwick Dey'.

But there is an active supported fork with same name 'Live SASS Compiler' build by 'Glenn Marks'. As fork it works the same way and the settings are almost the same. Or you can use another actual compiler which is faster as you can use an direct installed SASS Version on your system. In that case you need to change the settings for your project.

Information about that you will find here:

https://stackoverflow.com/a/66207572/9268485

Updated: Correction name of author of supported extension 'Live SASS Compiler' to correct identification of extension.

Brebber
  • 2,986
  • 2
  • 9
  • 19
0

Go to path: C:\Users\your user\AppData\Roaming\Code\User\settings.json

and change there the "liveSassCompile.settings.formats" section

for example:

the parameter : "savePath": "/Python/CSS",

enter image description here

batsheva
  • 2,175
  • 1
  • 20
  • 32