Local CSS Not Being Injected

sage
1

Hi,

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
2

Run gulp, then gulp watch

3

I have. The files are being generated as I said in my original post but it is only using the hashcode css file and not injecting the main.css.

4

The problem is that the manifest is pointing to the hashed files.

Running gulp (NOT gulp --production) will resolve it.

Do this:

gulp && gulp watch
5

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.

6

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.

7

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?

8

Looks like the serveStatic option of browsersync might fix this issue but can’t getting working. Tried:

  browserSync.init({
    files: ['{lib,templates}/**/*.php', '*.php'],
    proxy: config.devUrl,
    serveStatic:[{
      route: '/wp-content/themes/sage/dist/styles/',
      dir: './dist/styles/'
    }],
    snippetOptions: {
      whitelist: ['/wp-admin/admin-ajax.php'],
      blacklist: ['/wp-admin/**']
    }
  });

I tried isolating this behaviour in another theme and it works. I guess something in sage interferes

9

Anyone have any ideas?

10

I had the same issue, see this thread:

I found a workaround for this by removing the versions from the paths in **dist/**manifest.json.