With VSC Live Sass Compiler, is there a way to create multiple source directories which output to respective CSS directories?

Question

I'm using VS Code and Live Sass Compiler to handle my SCSS files. We have our standard styles for various pages. Those files are sourced at ~/scss and compile to ~/dist/css/.

However, I'm starting to write out custom components and I want to link those component SCSS files differently. Those will be sourced at ~/scss/components and compile to ~/dist/css/components.

Is there a way, with Live Sass Compiler settings to create two source directories, and based on my source directory -- compile to a respective output directory?

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

If there is another Sass compiler that can do this, please let me know. This is for a very large site and I need to get it right the first time.

score 2 · Accepted Answer · answered Aug 05 '21 at 18:51

2

Ritwick Dey's original Live Sass Compiler is no longer maintained (last update 11.07.2018), so I've moved to Glenn Marks' forked version here: https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

With that version, using a savePath like this should do what you want.

"savePath": "~/../dist/css/"

Check out the Settings & Commands Docs for more info.

answered Aug 05 '21 at 18:51

Leon

1,478
3
16
20

That's interesting. I just saw the exact same advice yesterday in a YouTube video from Kevin Powell. – Millhorn Aug 06 '21 at 22:03

With VSC Live Sass Compiler, is there a way to create multiple source directories which output to respective CSS directories?

1 Answers1