Changes in sass file not being recolonized as valid

Question

Ok, I am new to angular been following a tutorial and it says find the main styles.sass and do some css there but I did the following css from the tutorial and it says that it's not recognized.

I am on Version 12.11.1 of node js if that makes a difference? As the tutorial seems to be geared for 10

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');

$primary: rgb(111, 0, 255);

body {
    margin: 0;
    font-family: 'Nunito', 'sans-serif';
    font-size: 18px;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background: $primary;
    padding: 1em 0;

    a {
        color: white;
        text-decoration: none;
    }
    a.logo {
        font-weight: bold;
    }

    nav {
        float: right;

        ul {
            list-style-type: none;
            margin: 0;
            display: flex;

            li a {
                padding: 1em;

                &:hover {
                    background: darken($primary, 10%);
                }
            }
        }
    }
}

h1 {
    margin-top: 2em;
}

You can see here I am in the correct file.

Answer 1

You need to run

ng serve

to watch for changes