CODEWITHSUNDEEP
htmlsass
ChrisAnthemum
ChrisAnthemum

Reputation: 3

Does VSCode automatically compile my SCSS into CSS?

In this tutorial:

https://www.youtube.com/watch?v=Zz6eOVaaelI

They say to hit a button on the bottom of the window (I have, 'Live Sass Compiler,' downloaded) and that would make a CSS file that VSCode compiles my SCSS to.

Which, it does not seem to be doing; here's the HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <link rel="stylesheet" href="style.scss"/>
        <title>Sassy</title>
    </head>
    <body>
        <header>
            <h1>Hello!</h1>
            <button>Hello--again!</button>
        </header>
        <div class="contact">
            <button>Submit</button>
            <div class="info">
                <h1>Our contact info</h1>
                <p>This is our info</p>
            </div>
        </div>
    </body>
</html>

Here is the SASS:

header {
    background: lightblue;
};

However, when I open a live server, the background does not appear light blue; just basic white.

Lastly, my differs from the video as I just put the HTML and the SASS file in the same folder.

Upvotes: 0

Views: 221

Answers (1)

Tyler Garner
Tyler Garner

Reputation: 11

<link rel="stylesheet" href="style.scss"/>

You need to link the actual .css file that's compiled from your .scss file. Sass files themselves cannot be used as the stylesheet for your page.

<link rel="stylesheet" href="style.css"/>

Upvotes: 1

Related Questions