WordPress loading .SCSS instead of .CSS

Question

I recently got Sass and WAMP up and running on my new PC and started working on a new WordPress-site at my localhost.

But then i noticed that WordPress is loading the .SCSS file even though I have enqueued the CSS-stylesheet like this in my functions.php:

function theme_primary_css() {
wp_enqueue_style( 'theme-styles', get_template_directory_uri().'/css/theme-styles.css' ); 
}
add_action( 'wp_enqueue_scripts', 'theme_primary_css' );

I can see the theme-style.css is loaded succesfully when I look at the site's source code. But when looking in Web Developer Tools I can see it loads the CSS from the .SCSS file. What's going on?

It may be great for debugging etc. - but I have a problem when using nested styles like this:

h1 {
    .entry-title {
       margin-top: 0px;
    }
}

This style isn't working - probably because it is loading the .scss file - but at the same time my variables set in .scss works fine (even though it loads the .scss and not the .css file - the 30px you see in the picture is actually a variable). I'm pretty confused!

By the way I am using Brackets with an autocompiler installed (which works perfectly).

I hope someone can help me out!

Thanks in advance!

Answer 1

Thanks for the help Steve and Rnevius! You got me on the right track.

The reason why my style didn't work was because i missed a &-sign before my .entry-title class. So the working Sass ended up being:

h1 {
   font-size: $h1-size;

   &.entry-title {
    margin-top: 0px;
   }
}

So, as Rnevius pointed out, it isn't loading the .scss file - it is just showing the .scss file in the inspector to help me out developing - which is very helpful. So I came to the conclusion that it was my CSS/Sass that was the problem - and yes - I missed a &-sign as mentioned above. It all works now.

Hope it can help other hours-of-coding-tired people like me. I'll go to bed now :D