Help! Gulp-Angular Isn't Picking Up My Sass (Scss) Files! - SOLVED

3/19/2016

I was making a rookie mistake earlier today, and I'm embarrassed to say how long I was scratching my head for before I finally found the solution. Hopefully I can save you some time and trouble here if you are experiencing the same issue.

Setting the Stage

The story begins with me running my favorite yeoman generator, gulp-angular (for more info why check out my other post 8 Reasons Why Gulp-Angular is My New Favorite Yeoman Generator). I knew that gulp was using it's trusty watch command so I figured I could just create a new file, name is whatever.scss, put some basic sass code in there, and let BrowserSync show me the magic.

The Issue

The problem was that I would create a scss file and fill in some styles for a class, but nothing would happen! I would let BrowserSync refresh the page, but I wouldn't see any of my style changes. Strange...

The Code

In the markup I had a div with some text in it with the class whole-footer like so:

<div class="whole-footer">
    Hello! I'm the footer!!!
</div>

Then I have a simple scss file named footer.css that looks like this:

$footer-red:red;

.whole-footer {
  color: $footer-red;
  background-color: lightgreen;
}

Then when I looked at the screen to my horror the page did not update with red and green colors!

The Answer

Back before I used gulp-angular I would pull in the css stylesheets manually by adding a <link> tag in the html file. I remembered though that gulped used its watch task to pick up html, js, css, and yes, even scss files automatically. When I went into the gulp folder generated by the yeoman gulp-angular generator and looked at the watch.js file, I realized the source of my issue. If you take a look at 19 it should look like this:

path.join(conf.paths.src, '/app/**/*.scss')

The odd-looking path /app/**/*.scss is an easy-to-type way of saying, "get all files with scss extension any number of folders deep inside of the app folder". That last part is the important piece; inside of the app folder. INSIDE OF THE APP FOLDER. Huzzah! My problem was that I was creating folders inside of the src folder, one level above the app folder, and this is why gulp was not picking them up. So, if gulp isn't picking up your scss files check to make sure that they are in the root folder being checked by your gulp watch task!

0 Comments