main.css not being injected in browsersync

[x] I've read the guidelines for Contributing to Roots Projects
[ ] This is a feature request
[x] This is a bug report
[x] This request isn't a duplicate of an existing issue
[x] I've read the docs and NPM Debugging Guidelines post and followed them (if applicable)
[x] This is not a personal support request that should be posted on the Roots Discourse forums

What is the current behavior?

BrowserSync does not inject main.css.

What is the expected or desired behavior?

BrowserSync should inject main.css or main.css should become enqueued instead of the dist build (main-[hash].css)

Bug report

I followed directions to install Sage 8.5.1 through composer. I updated my development URL in the manifest and ran gulp, gulp --production and gulp watch. (My IDE is set to automatically upload changes)

BrowserSync opens up (http://localhost:3000) and my local development URL is correctly proxied and I can see site loaded correctly with styles. When I look in inspector I can see that the styles are given from the production css files, e.g. main-23hg4234gh.css which I will refer to as main-[hash].css.

When I make a change to my main.scss file, the changes are detected and a file main.css is generated in the dist folder. However, the BrowserSync site does not use this file. It only takes the file from the server that was created with gulp --production (main-[hash].css).

I gather that what is meant to happen is that BrowserSync injects the local main.css file that contains the changes but that is not happening for me.

Here is console output:

[19:13:16] Starting 'watch'...
[19:13:16] Finished 'watch' after 62 ms
[BS] Proxying: http://zanewoo.localdev
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.56.1:3000
 -------------------------------------
          UI: http://localhost:3002
 UI External: http://192.168.56.1:3002
 -------------------------------------
[BS] Watching files...
[19:14:49] Starting 'wiredep'...
[19:14:49] Finished 'wiredep' after 210 ms
[19:14:49] Starting 'styles'...
[BS] 1 file changed (main.css)
[19:14:53] Finished 'styles' after 3.74 s

It is generating the main.css file fine. I can see my changes in there, it's just the browsersync site does not use main.css. It uses main-[hash].css

Please describe your local environment:

WordPress version: 4.7.3

OS: Windows 10

NPM/Node version: X

NPM 4.5.0 Node 6.10.0 (I have also ran npm update -g)

Where did the bug happen? Development or remote servers?

Development

Is there a related Discourse thread or were any utilized (please link them)?

https://discourse.roots.io/t/browsersync-proxy-ineffective/9393

Other relevant information:

My development server is Ubuntu 16.04 running easy engine

roots / sage

main.css not being injected in browsersync #1879

Bug report