How to keep the folder structure

[eazancot]

How do I configure the "settings.json" file of the local ".vscode" folder to keep the css directory structure equal to the scss directory structure? Example:

<parent>
|__ <sass>
|    |__ FILE1.scss
|    |__ <layout>
|    |   |__ FILE2.scss
|    |__ <vendors>
|        |__ FILE3.scss
|        |__ FILE4.scss
|__ <css>
     |__ FILE1.css
     |__ <layout>
     |   |__FILE2.css
     |__ <vendors>
         |__ FILE3.scss
         |__ FILE4.scss

Currently I just get all the compiled css files to be saved in the same folder regardless of the directory structure of the source scss files!

<parent>
|__ <sass>
|    |__ FILE1.scss
|    |__ <layout>
|    |   |__ FILE2.scss
|    |__ <vendors>
|        |__ FILE3.scss
|        |__ FILE4.scss
|__ <css>
     |__ FILE1.css
     |__ FILE2.css
     |__ FILE3.css
     |__ FILE4.css

My current code in the "settings.json" file is:

{
    "liveSassCompile.settings.formats":[
        {
           "format": "expanded",
           "extensionName": ".css",
           "savePath": "/assets/css"
       },
       {
           "format": "compressed",
           "extensionName": ".min.css",
           "savePath": "/assets/css"
       }
    ],
    "liveSassCompile.settings.excludeList": [
        "/**/node_modules/**",
        "/.vscode/**"
    ],
    "liveSassCompile.settings.generateMap": true,
    "liveSassCompile.settings.autoprefix": [
        "defaults"
    ]
}

Thanks in advance for the help!!!!

By the way, excellent work, thanks for sharing it with the Visual Code user community!!!

[glenn2223]

You want to take a look at savePathSegmentKeys and savePathReplaceSegmentsWith in the format setting (touched on in "save path notes")

Basically, any key that is found is replaced with the replacement value. The key is restricted to matching single folders - it's not a string replacement - so you can't have a key that's Folder 1/Folder2.

You'd want your settings to start with this instead:

{
    "liveSassCompile.settings.formats":[
        {
           "format": "expanded",
           "extensionName": ".css",
           "savePathSegmentKeys": [ "sass" ],
           "savePathReplaceSegmentsWith": "css"
       },
       {
           "format": "compressed",
           "extensionName": ".min.css",
           "savePathSegmentKeys": [ "sass" ],
           "savePathReplaceSegmentsWith": "css"
       }
    ],
// ETC, ETC

---

P.s. thanks for opening the first discussion! 🎉

[eazancot]

Thank you very much for the prompt response, but the truth is that I don't quite understand how to specify the values to generate the style files (file.css) keeping the directory structure of the scss files that generate them.

[eazancot]

I would really appreciate it if you could show me a complete example based on the following directory structure with 3 scss files:

1. [project] [assets] [scss] style.scss
2. [project] [assets] [scss] [vendors] base.scss
3. [project] [assets] [scss] [vendors] [bootstrap] bootstrap.scss

SCSS Directory structure

<project>
|__ <assets>
   |__ <scss>
       |__ <vendors>
       |   |__ <bootstrap>
       |   |   |__ bootstrap.scss
       |   |__ base.scss
       |__ styles.scss

How should I specify the code in the "settings.json" file to generate the css style files with the same scss directory structure, i.e.:

1. [project] [assets] [css] style.css
2. [project] [assets] [css] [vendors] base.css
3. [project] [assets] [css] [vendors] [bootstrap] bootstrap.css

CSS Directory structure

<project>
|__ <assets>
    |__ <css>
    |   |__ <vendors>
    |   |   |__ <bootstrap>
    |   |      |__ bootstrap.css
    |   |__ base.css
    |__ style.css

Entire resulting directory

1. [project] [assets] [css] style.css
2. [project] [assets] [css] [vendors] base.css
3. [project] [assets] [css] [vendors] [bootstrap] bootstrap.css
4. [project] [assets] [scss] style.scss
5. [project] [assets] [scss] [vendors] base.scss
6. [project] [assets] [scss] [vendors] [bootstrap] bootstrap.scss

Entire resulting directory

<project>
|__ <assets>
   |__ <css>
   |   |__ <vendors>
   |   |   |__ <bootstrap>
   |   |   |   |__ bootstrap.css
   |   |   |__ base.css
   |   |__ style.css
   |__ <scss>
       |__ <vendors>
       |   |__ <bootstrap>
       |   |   |__ bootstrap.scss
       |   |__ base.scss
       |__ styles.scss

I hope you can help me to configure the extension correctly... I'm sure this will serve as a guide for many users who may have the same doubt!!!!

Thank you very much in advance!

[glenn2223]

In this case you need the below settings. I hope this makes sense

{
    "liveSassCompile.settings.formats":[
        {
           "format": "expanded",
           "extensionName": ".css",
           "savePathSegmentKeys": [ "scss" ],
           "savePathReplaceSegmentsWith": "css"
       }
    ],
// ETC, ETC

[guisfons]

Hi Glenn! Hope you are doing well...
With those properties I got the problem "Property SavePathSegmentKeys/SavePathSegmentWith is not allowed"

How can I solve it? Thanks!

[glenn2223]

The settings have been unified, please refer to the setting savePathReplacementPairs in the documentation

[eazancot]

Got it, it work great, tks a lot!!!

Sorry I didn't catch it at first!