If I understand your qestion correctly, here is answer:

If the Sass transpiler is watching a directory (either through the command window or via an editor extension), you'll want to exclude changes to these files from transpilation, and Sass makes it easy to do so. Just prepend an underscore to their names.

Source: https://www.tutorialsteacher.com/sass/import-files-and-partials

Let's say you use:

"scss": "sass web/assets/scss/main.scss web/assets/css/main.css --style=compressed --watch"

When transpiller watching changes in main.scss where you importing files, then you get output in main.css. Then it does not matter if you import partials or not.

If you watch a directory, for example:

"scss": "sass web/assets/scss/ web/assets/css/ --style=compressed --watch"

Then, if you don't use partials, you will get every file separate in addition.

There is no module with the namespace "v". - color: v.$mainHeaderColor;

Your receiving the error when compiling main.scss because the _layout.scss partial file doesn't know about the namespace "v" and wasn't able to load the members like $mainHeaderColor from the _variables.scss module. This happens because _layout.scss doesn't have a @use rule loading the members from "variables", therefore it can't access variables defined in that module.

A "quick" fix would be to introduce a @use rule in your _layout.scss file to load the variables from _variables.scss like this:

@use "./variables" as v;

/* _layout.scss */

h1 {
    color: v.$mainHeaderColor;
}

Now there really isn't a need to use @forward with your current structure as its only two partial files being loaded into main.scss. If you want to use @forward I'd recommend reading further and setting up directories with index files.

To update your main file, this is how loading the files with @use at-rules into main.scss would look:

@use 'variables' as v;
@use 'layout';

/* main.scss */

/* Use the loaded members from '_variables.scss' inside the main file */
.demo {
  color: v.$mainHeadColor;
}

Using @use rules along with @forward and index files

With the @import at-rule slowly being phased out of the main implementation of Sass, (dart-sass). It's time for us to adopt @use rules and learn how to utilize the cool features like index files with @forward and setting custom namespaces for loaded modules.

Since @import at-rules made everything globally accessible, this is where I've seen most of the confusion around usage of @use come into play. We have to make sure all files have appropriate knowledge of variables, mixins, functions etc if they aren't defined in the same partial or file.

If you have a main.scss Sass file that is going to be compiled with two (or more) imported partial files. The best way to utilize @use and @forward rules is by creating a directory at the same level as your main.scss file (or elsewhere just use the correct path) and create an index file, _index.scss to load the entire directory of partials with a single @use rule.

Note: All @use at-rules must be placed at the top of the file.

This index file will be where you place your @forward rules, using @forward "<url>"; for each partial you want to load into the index file. Think of it as one big module that you can load elsewhere with a single @use rule in your main.scss file, thus giving you access to all of the partial files loaded into that index file within the /partials directory.

- main.scss 
- partials/
  - _index.scss
  - _variables.scss
  - _layout.scss
  ...

Going along with the example, lets say your _variables.scss partial file looked like this and wasn't relying on any other files:

$mainHeaderColor: #222;
$someOtherVar: #f06;

and if the _layout.scss partial wanted to use variables defined in _variables.scss, we would have to include a @use rule to let _layout.scss "know" about the loaded members.

@use "./variables" as v;

/* _layout.scss */

h1 {
    /* now this works as expected */
    color: v.$mainHeaderColor;
}

If you didn't want to define a namespace when loading with @use, simply write @use "<url>" as <namespace>; where the namespace being an asterisk * signals that a namespace won't be defined so you can use it like color: $mainHeaderColor instead of v.$mainHeaderColor. Note, this can leading to naming conflicts if your not careful.

Now to load these partials into the main.scss file which will be compiled, you could either use two separate @use rules for the _layout.scss and _variables.scss partials or create an index file (_index.scss) and load the /partials directory with a single @use at-rule giving you access to all the partials in the directory.

@forward "./variables";
@forward "./layout";

/* partials/_index.scss */

Voila! Now all that is left is to load the /partials directory into the main.scss file to be compiled and maybe used later on. The _layout.scss partial is loaded into main.scss through our single @use rule and we also have access to _variables.scss variables or any other partial file that was forwarded in the index file.

@use "./partials" as *;

/* main.scss */

h2 {
  color: $mainHeaderColor;
  background: $someOtherVar;
}

If you had a directory of mixins like ./mixins, then you would follow the same workflow of placing all partial files inside the /mixins directory and then create an _index.scss file to load the partials with @forward rules. To finally load the directory with a single @use rule giving you access to all of the partials loaded in a specific directory through an index file. I used the /partials directory as a "starting" point but it would make more sense to create a directory /vars, /mixins etc and place files in their respective directories for better structure/organization.

It just refers to an organizational approach to divide up your SASS files into separate folders and files to represent the different components or other logical parts that make up your app.

I imagine there are opinions out there about what exactly is the best way to organize your partials, but the typical example just involves organizing your partials into folders and files using some easy-to-follow organizational system and then importing all your partials to main.scss or wherever they ultimately get compiled.

At the end of the day, it just means breaking up your files into logical manageable chunks. Sort of like the design principle to keep a separation of concerns.

The intended result is that you or other developers can intuitively find the appropriate file and quickly make necessary changes without having to search too hard or go through as many lines of code.