I am just getting started with Sage and it is really great but I think I must be missing something to do with how browsersync is supposed to work.
I have added my development server URL in the manifest and when I run gulp watch it correctly proxies my development url. However, gulp watch automatically generates “main.css” but the template uses “main-hashcode.css” so I only see the updates when I run gulp --production.
I can see in setup wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null); so why is it only using the one with the hashcode? Is there a development flag I need to set somewhere?
I am obviously getting it wrong as having to run production build after every change is obviously wrong.
Any advice greatly appreciated.
Edit: I tried adding define('WP_ENV', 'development') which I saw in another thread but no joy. gulp-watch still builds main.css and the template still uses main-hashcode.css
(I am using 8.5.1 btw)
This is the gulp watch 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
No, that does not resolve it. Like I said in the Issue you closed down (https://github.com/roots/sage/issues/1879), I have run gulp, I have also now tried running “gulp && gulp watch” from command line although I can’t see what different running it together like that would make. It only references the hashed files. It does not reference the main.css file at all.
Deleting production files from development server fixed this. Running Gulp cleans locally but the dist file was still on server so it was being queued.
It isn’t injecting the css. It says “injected main.css” but it always uses what is on the server instead of local file. I have to upload to server and then refresh to see changes.
I confirmed by deleting the css files from dev server. Then when I make a change to css, it builds and top right of browser it says “injected main.css” but none of the styles are loaded, the page is totally without styles so it is definitely not being injected from local main.css
It is definitely 100% never using the local main.css file. It only ever uses the main.css on the dev server. This means I have to upload after every change which totally defeats the purpose.
How do i get it to inject the local main.css file?