coe
coe

Reputation: 291

SASS live compiler Mixing / Variables not updating until I update main scss file

I am new to SASS so please forgive me on my terminology and understanding. I am going through some tutorials on youtube and it has been great, the video is called 'Learn Sass In 20 Minutes | Sass Crash Course'. I am using visual studio code and what is tripping me up is the part where he has me create a _header.scss file along with _variables.scss as extensions of the main style.scss. Where the header from the style.scss is an @import 'header'; from the _header.scss using a @mixin variable.

I am running the live server on visual studio code and it will not update until I manually save all the files that I changed then also save the 'style.scss' in the end. Is there a way I could say modify the _header.scss file and _variables.scss and have it auto-update the style.scss?

If that doesn't make sense I will say it this way. I have a mixin variable and other '$variable's in my main style.scss file. When I make changes to the _variable.scss file and the _header.scss, is there a way I can just save these and have it automatically update the style.scss file as well? It is extremely time consuming having to go through and save them all to get it to do one update.

I tried making a key in VS code for 'Save All' multiple ways from online tutorial. Nothing works. I hope I am making sense, it is hard for me to explain being new to this. Thank you

style.scss

@import 'variables';
@import 'header';



.contact {
  @include flexCenter(row, grey);
}

_header.scss

@mixin flexCenter($direction, $background) {
  height: 25vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
  background: $background;
}

header {

  @include flexCenter(row, rgb(31, 28, 28));
  color: $textColor;

  h1 {
    color: $textColor;
  }

  button {
    background: $primaryBtn;

    &::after {
      content: "o";
    }
  }
}

_variables.scss

$textColor: brown;
$primaryBtn: pink;

Upvotes: 0

Views: 1284

Answers (1)

coe
coe

Reputation: 291

I had to delete both the include and exclude list in the settings. I then closed the workspace and opened the folder and now it works.

Upvotes: 1

Related Questions