Why Put in Front of the File Name "_" or "_" in SCSS/Css

Why put in front of the file name _ or _ in scss/css?

The _ (underscore) is a partial for scss. That means the stylesheet its going to be imported (@import) to a main stylesheet i.e. styles.scss. The advantage on using partials is that you can use many files to organize your code and everything will be compiled on a single file.

What does an underscore at the start of an *.scss file name indicate?

The only reason I can find to use underscore before the name of the partial is what's described in the Sass docs here:

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.

Any SASS files not beginning with an underscore will be rendered on their own, which will fail if they are using variables or mixins defined elsewhere.

In the end I have concluded that the underscore is just used to clarify that it is a partial file. We can also use a partial file without using an underscore as prefix.

Issue with main.scss updating automatically

It seems to be auto reloading now. i deleted all the package.json, module files and reinstalled node-sass and set up a new live server in the terminal. The only other problem is that none of the animations for the buttons and pictures are working for some reason i had two css stylesheets that appeared to be identical one named style.css and one named main.css both located in the css folder heres my package.json script "scripts": { "compile:sass": "node-sass sass/main.scss css/style.css -w" }, So i deleted the main.css file and the one labeled main.css.map

Why @use and @include works in global scss file but not components scss files?

Finaly came to a solution in that Denis Pasin's article.

So I just needed to update create two mixins:
themed for components style
gthemed for globals style

@mixin themed() {
    @each $theme, $map in $themes {
        :global(.theme--#{$theme}) & {
            $theme-map: () !global;
            @each $key, $submap in $map {
                $value: map-get(map-get($themes, $theme), "#{$key}");
                $theme-map: map-merge(
                    $theme-map,
                    (
                        $key: $value,
                    )
                ) !global;
            }
            @content;
            $theme-map: null !global;
        }
    }
}

@mixin gthemed() {
    @each $theme, $map in $themes {
        .theme--#{$theme} & {
            $theme-map: () !global;
            @each $key, $submap in $map {
                $value: map-get(map-get($themes, $theme), "#{$key}");
                $theme-map: map-merge(
                    $theme-map,
                    (
                        $key: $value,
                    )
                ) !global;
            }
            @content;
            $theme-map: null !global;
        }
    }
}

SCSS compiles correctly to CSS file, but doesn't update styles

Knew it was something silly. But I am fine with reaching out for help as more should be.

For anyone else who has a similar issue. It's stupid, it's basic, and once you figure it out, you won't do it again ! haha. I know I won't.

Your folder structure is everything. As a user pointed out, I had not shown that first and foremost. That is where I should have started searching.

I somehow had a second folder in the root named CSS with the styles correctly compiled. However I had been so narrow in my view of only working with the SCSS/CSS folder I had created and thought I had linked correctly. Always double check the folder structure. Expand all folders and get a real understanding of all your folders and what is where. That certainly helped me once I knew where to look.

Once I linked the stylesheet correctly,
Bang, the colors I had set appeared instantly.

I hope this helps someone else like me. Never be afraid to ask for help. Never be afraid to feel stupid, or inferior. You aren't. You're learning that's what matters.

---

Related Topics