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?

Developer Tools showing .scss - but the .css file is loaded correctly

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!

This is just chrome being 'helpful' I'm sure you can turn this feature off but I can't remember right now - have a look on Google — Steve, Oct 15 '15 at 19:57
It's not loading the SCSS...it's using a map file to help you out in the inspector. Read more [in the SASS docs](http://thesassway.com/intermediate/using-source-maps-with-sass). — rnevius, Oct 15 '15 at 20:00
http://stackoverflow.com/questions/24813349/chrome-devtools-not-showing-less-files kinda of the opposite problem, but the soure map line is the important bit - remove that from your compiled css and chrome won't know about the scss files — Steve, Oct 15 '15 at 20:02

score 2 · Accepted Answer · answered Oct 15 '15 at 20:41

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

WordPress loading .SCSS instead of .CSS

1 Answers1