sass - Issue with main.scss updating automatically

Question

Here is my main.scss file with all my imports...

@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";

@import "base/animations";
@import "base/base";
@import "base/typography";
@import "base/utilities";

@import "components/bg-video";
@import "components/button";
@import "components/cards";
@import "components/composition";
@import "components/feature-box";
@import "components/form";
@import "components/story";

@import "layout/footer";
@import "layout/grid";
@import "layout/header";
@import "layout/navigation";

@import "pages/home";

I started having this issue after creating the @import "layout/navigation" file in my layout folder. It seems nothing is reloading automatically unless i do a manual save in the main.scss which contains the @imports it only then updates. I downloaded the live sass compiler aswell as the sass extensions on vs code and closed out of the live server and terminal i had everything running on. i then started using those extensions and the integrated terminal in vs code.... I checked to see if node and npm was still installed and if i do node-v and npm-v to check that its installed i get node version v14.15.3 and npm version 6.14.9. i tried to reinstal node-sass using npm install -g node-sass command in the terminal and i get a permission denied error... The site is also now just totally unresponsive, nothing that was clickable can be clicked and nothing is changing on the page if i change it in a file. I have no idea how to fix this please help.

Answer 1

Add the '_' in front of scss files. and check in VS Code.

/scss
 main.scss
 layout/_header.scss
 layout/_footer.scss