SASS Folder Path - How to manage files

HTML-CSS
1

I got Live Sass Compiler from Glenn Marks installed on VS Code.
Added the settings.json to the following:

    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/dist",
            "savePathReplacementPairs": null
        }

And I’m working on /studies/sass/sass—fcc/notes.scss.
I get why the Live SASS Compiler created the notes.css and notes.css.map at /dist (because I sad so on settings.json).

But got some questions that I need help.

  1. How it defines where to create the /dist?

  2. If I working on different projects, how can I manage the files in /dist?

  • Should I create a folder for each project in /dist (it seems not right, since files will be created again and again in /dist)?
  • After ending a project, should I move its SASS related files to project directory?
    (I do consider I might be getting the wrong idea of how to work with SASS and Live SASS Compiler)

I got the print of VS Code.
Thanks in advance!

Screenshot_2024-12-05_17-30-58
Screenshot_2024-12-05_17-30-581092×692 113 KB

2

How does it define where to create the /dist folder?

The /dist folder is relative to the working directory of the .scss file you’re editing. By default, it assumes the directory starts at the root of your project unless you specify otherwise in the settings.json file.

If I’m working on different projects, how can I manage the files in /dist?

To avoid having all your output files lumped into the same /dist folder across projects, you can:

  1. Use project-specific settings:
  • Create a .vscode/settings.json file in each project folder.
  • Customize the savePath to a project-specific location (e.g., "css/" or "assets/css/").Example of a .vscode/settings.json for a project:

json

{
    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "css/"
        }
    ]
}
  1. This keeps your output files organized and ensures they stay within the respective project.

Should I create a folder for each project in /dist?

Not really. A better approach is to keep your output folder relative to each project by defining it in the .vscode/settings.json. This way, each project has its own css/ or dist/ folder.

For example:

bash

/project-folder
    /scss
        notes.scss
    /css
        notes.css
        notes.css.map

After ending a project, should I move its SASS-related files to the project directory?

Ideally, your project structure should include SASS files and their outputs from the start. Moving files later can cause disorganization or broken paths.

A recommended folder structure for a project might look like this:

bash

/project-folder
    /scss
        notes.scss
    /css
        notes.css
        notes.css.map
    index.html
1 Like
3

Hi!

Thanks for the response.
And sorry for the late reply.

I understood the answer and I’ve done as suggested.
But some doubts appeared and some weird stuff too.

A) About /dist folder.
I’m working on /sass—fcc.
When I copy the relative path of the folder I get /studies/sass/sass—fcc.
On terminal I have vboxuser@Xubuntu: ~/repos-git/studies/sass/sass—fcc.
Why isn´t the root of the project vboxuser or /studies, but /repos-git?
What am I missing here?
(The /dist was created on /repos-git).

B) I’ve created in the project-folder:

  • /css: put my notes.css in here
  • /scss: put my notes.scss in here
  • /vscode/settings.json: set “savePath: /studies/sass/sass—fcc/css” (/studies/sass/sass—fcc being project’s folder’s relative path).

But when I “Watch SASS” it keeps generating the files on /scss folder. Why would that be?

4

Here’s a concise reply tailored for the FreeCodeCamp forum:

A) Root Folder Issue:
It seems your project root is set to /repos-git because that’s where VS Code or your terminal session starts. To fix this, try opening the /sass—fcc folder directly in VS Code. This will help ensure relative paths work as expected.

B) Files in /scss Instead of /css:
Double-check your settings.json. Ensure "savePath": "/css" is set relative to the project folder. If it’s still generating files in /scss, there might be another conflicting settings.json or a misconfiguration in the Live Sass Compiler settings.

Next Steps:
Make sure the correct folder is opened in VS Code, and verify the Live Sass Compiler is using the intended settings.json. That should resolve the issues!

Happy Coding!

2 Likes
5

A) AHH! It worked! So simple.
So it depends on the folder is opened in VS Code when running “Watch SASS”.
Great!

B) Since I made changes to global (?) settings, I reset that to default. It didn’t seem to be the problem.
Tried to find other possible settings I may have changed. Found nothing.
The one thing I could think of, I’m kinda shame of it, is that .vscode folder with settings.json for the specific project.
I thought the “dot” in it was a typo… That was the problem. Sorry about that.

So, now is all working as intended and understood the root “problem”.
Thanks a lot for the help and patience!

2 Likes