# Sage 9 beta 4: Browser Sync doesn't update the styles

**URL:** https://discourse.roots.io/t/sage-9-beta-4-browser-sync-doesnt-update-the-styles/10364
**Category:** sage
**Tags:** browsersync, webpack, sage9
**Created:** 2017-09-04T23:37:11Z
**Posts:** 24

## Post 1 by @don — 2017-09-04T23:37:11Z

System: MacOs  
PHP: 7.1.8

I am suing sage-9-beta-4 for a project. ` **yarn build** ` works fine. When I run the script ` **yarn start** ` it launches the website, and starts watching the files. However, changes for scss files do not reflect on the browser.

I can see following error in the console window.

**Failed to load resource: [http://localhost:3006/xxxxxx/wp-content/themes/tonyfry/dist/styles/main.css](http://localhost:3006/xxxxxx/wp-content/themes/tonyfry/dist/styles/main.css)**  
**the server responded with a status of 404 (Not Found)**

---

## Post 2 by @oscar-g — 2017-09-04T23:38:50Z

don, did you try removing the `.cache-loader` folder?

---

## Post 3 by @don — 2017-09-04T23:44:39Z

I removed, however it reappears. Is there a way to disable the cache-loader plugin? Will it fix it?

---

## Post 4 by @oscar-g — 2017-09-05T00:04:56Z

Did removing that folder fix your problem?

If so, then consider removing the cache-loader (`{ loader: 'cache' },`) in `webpack.config.js`.

However, doing that might slow things down.

Personally, I would keep the loader and just remove the folder, only when needed (when it seems like changes are not being recognized).

* * *

If removing the folder did not fix your problem, then maybe I misinterpreted the issue. If that’s the case, can you post a few more details?

---

## Post 5 by @don — 2017-09-05T00:08:09Z

Hi I have successfully used an image using

`background: url("../images/light_blue_pattern.png") repeat;`

However, when I change the image to something else like

`background: url("../images/main_bg.png") repeat;`

I get the following error;  
**GET [http://localhost/wp-content/themes/tonyfry/dist/images/main\_bg.png](http://localhost/wp-content/themes/tonyfry/dist/images/main_bg.png) 404 (Not Found)**

There should be the site name between **localhost** and **wp-content**. I do not get the same error when I use the first image.

I have also noticed that first image (working one) loads as  
`background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAIAAAC3ytZVAAAACXBIW…Dj35L0yDELMap4GwSibzCrS4JK23+GbZNMDT5ltPrBzPX8BXCzPO2Gyh4dAAAAAElFTkSuQmCC) repeat;`

in compiled css. And second one use **[http://localhost/wp-content/themes/tonyfry/dist/images/main\_bg.png](http://localhost/wp-content/themes/tonyfry/dist/images/main_bg.png)** as the URL.

---

## Post 6 by @Sh3nl0ng — 2017-09-05T00:03:50Z

May want to try rebuilding your assets to see if it resolves this for you.

> yarn build

---

## Post 7 by @don — 2017-09-05T00:05:09Z

I can’t use `yarn start` as it’s not updating the styles during the watch. So I always use `yarn build`.

---

## Post 8 by @don — 2017-09-05T00:14:34Z

So i did the following steps.

1. Removed .cache-loader folder
2. Ran `yarn start` (it created a new .cache-loader folder)
3. Modified \_global.scss file ( e.g.: change body background color)
4. Browser displayed “…rebuilding” in the corner and then displayed success message however style didn’t update

I’ll disable the plugin in see what happens, Thanks!

---

## Post 9 by @don — 2017-09-05T00:31:28Z

My problem is  
`yarn run start` runs as if there are no errors however it doesn’t apply **main.css**

Browsersync **detects** changes but **doesn’t update.**

---

## Post 10 by @oscar-g — 2017-09-05T00:58:00Z

Do the files in the `dist` folder get updated with the new changes at all?

---

## Post 11 by @don — 2017-09-05T01:03:31Z

I’ve been able to fix image loading issue by adding “[http://localhost/](http://localhost/)\<project\_folder\_name\>” to “/wp-content/themes/\<theme\_name\>” of the “ **publicPath** ”. Thanks for your help mate!

---

## Post 12 by @don — 2017-09-05T01:06:02Z

There is no **main.css** file in the `dist` folder at all when I run `yarn run start`:neutral_face:

---

## Post 13 by @Nicolo_Sacchi — 2017-09-05T01:31:50Z

Use the search! [Sage 9 main.css 404 on devUrl](https://discourse.roots.io/t/sage-9-main-css-404-on-devurl/9799/6)

---

## Post 14 by @don — 2017-09-05T23:34:20Z

Thanks mate! I’ll go through that

---

## Post 15 by @kiryl — 2017-09-29T18:12:35Z

Fixed by `"publicPath": "/wp-content/themes/<theme_name>/"`

---

## Post 16 by @dghez — 2017-12-07T10:16:06Z

Same problem here.  
To see changes on css i need to reload the page with devtools opened and with `disable cache` flagged. I don’t get any css update neither a reload when i change the js.

Here is the console error, that’s is not a not found error but something different (I deleted the theme name :slight_smile: )

 ![16](https://discourse.roots.io/uploads/default/original/2X/4/4f8a79dd481141f84052f016c4b406574471cd69.png). The strange things is that if I open that link in a new tab I get it works.  
Is possible that is something http / https related? I’m working on a https protocol, gives me by [Local](https://getflywheel.com/)

My **config.json** is

```
"publicPath": "/wp-content/themes/themeName",
  "devUrl": "https://siteName.dev",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/controllers/**/*.php",
    "resources/views/**/*.php"
  ]
```

Any idea?

EDT: when save the scss file I got a message in the corner from webpack that everything is fine and this in the console

 ![17](https://discourse.roots.io/uploads/default/original/2X/0/05d5eea343d3bef7989f25d46cff5a16cf3e642b.png).  
I noticed that the `style` folder in the `dist` disappears but I don’t get any error in the terminal. Then if I do a `yarn run build` the `dist` folder appears again. The strange thing is, as I already write before, is that if I reload the page (with dev tools + cache disabled) I get the style updated. :thinking:

---

## Post 17 by @Stephen — 2017-12-07T13:57:02Z

Hmm, it’s possible that HTTPS on your `devUrl` is causing a problem - have you tried change it to just `http://...`? Of course, it should work but do you really need HTTPS for dev? I’ve used it for some sites via Laravel Valet for my stack and it was fine but I haven’t tried yet for any Sage 9 sites.

Another question that probably doesn’t mean anything: in the `watch` section, you have the path `resources/controllers/**/*.php` - did you add that? I don’t have it and I don’t see it in the default installation. Plus, my controllers are in `app/controllers`, not `resources/controllers`… It would be surprising if a bad path in the watch list was enough to cause these problems but who knows…

Also, how long ago did you start this theme and how did you install it? For mine I used `composer create-project roots/sage your-theme-name dev-master` like it says in the readme and it has worked well. Having said that, I later modified mine to replace SASS with Stylus and a few other details. The default installation was working perfectly though.

---

## Post 18 by @dghez — 2017-12-07T18:26:30Z

> [@Stephen](#):
>
> Hmm, it’s possible that HTTPS on your devUrl is causing a problem - have you tried change it to just http://…? Of course, it should work but do you really need HTTPS for dev? I’ve used it for some sites via Laravel Valet for my stack and it was fine but I haven’t tried yet for any Sage 9 sites.

I’ve no idea how to change it because the default is https

> [@Stephen](#):
>
> Another question that probably doesn’t mean anything: in the watch section, you have the path resources/controllers/\*\*/\*.php - did you add that? I don’t have it and I don’t see it in the default installation. Plus, my controllers are in app/controllers, not resources/controllers… It would be surprising if a bad path in the watch list was enough to cause these problems but who knows…

I didn’t do anything by my own in this file, just set the devUrl. I don’t think is is a path problem because the js is built correctly, only the scss is not compiled into css in the dist folder BUT if i reload the page I can see the new style applied

> [@Stephen](#):
>
> Also, how long ago did you start this theme and how did you install it? For mine I used composer create-project roots/sage your-theme-name dev-master like it says in the readme and it has worked well. Having said that, I later modified mine to replace SASS with Stylus and a few other details. The default installation was working perfectly though.

actually I don’t remember how I did it but I’m sure I used `composer` as described in the installation doc. I made a quick check right now, on my composer packages I have `roots/sage-lib 9.0.0-beta.4` with `roots/sage-installer 1.3.0`

---

## Post 19 by @Stephen — 2017-12-08T12:53:12Z

@dghez, I just tried a fresh composer install and ran the Sage installer with all the defaults. I also set the site to run under SSL (ie. [https://sage9.dev](https://sage9.dev)). I set this same URL in the sage installer.

I’m using a different system for my server (Laravel Valet) so maybe your results will be a bit different but I observed similar problems with CSS not updating. Part of the problem seems to be that if you have a `devUrl` under HTTPS, the browsersync `proxyUrl` is still http by default in the config.

In my setup, all non-HTTPS traffic gets redirected automatically so when I ran `yarn start`, it was loading **https** ://localhost:3000/ in the browser but it wasn’t working because of mixed content (still trying to load content from **http** ://localhost:3000/ due to the `proxyUrl` setting). I also had lots of browser warnings because I don’t have a valid SSL certificate for _localhost_ so I had to tell Chrome I wanted to proceed anyway…

When I changed the `proxyUrl` to `https://localhost:3000`, and ran `yarn start` again, it finally began to work with the styles reloading (and viewing on [https://localhost:3000](https://localhost:3000) despite the broken HTTPS warnings).

For reference, this is my `config.json`:

```
{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/sage9",
  "devUrl": "https://sage9.dev",
  "proxyUrl": "https://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
```

So in summary, it looks like there are some issues with using Browsersync and a HTTPS devUrl. Unless you really need HTTPS locally, I think it would be better to go without it.

What happens if you try to visit your dev URL with just http://? If it redirects, you might have to update your WordPress `siteurl` and `home` entries in the `wp_options` table. If you can make it work without the HTTPS, you should have fewer headaches with all this…

---

## Post 20 by @dghez — 2017-12-09T09:10:53Z

Using `https://localhost:3000` in my `config.json` makes everything work. The strange thing is that I’ve already tried to do that but I got errors. This time maybe something changed and it worked.  
So weird.

Now the only thing I need to solve is the caching problem, I don’t get anything updated without devTools opened and `disable:cache` flagged.

Btw thanks @Stephen ! You made my day :slight_smile:

---

## Post 21 by @Stephen — 2017-12-09T14:23:56Z

Glad you got it to work finally, Robert :slight_smile:

That’s strange about the caching problem. Normally I have dev tools open most of the time when I’m changing styles but it also works fine with it closed. I guess you could leave dev tools open and detach it if you need the screen space…

It would be good to resolve it properly though - have you tried turning the disable cache flag off and looking at the network panel to see what the HTTP headers are? Maybe something in your local server setup is triggering the caching. It’s also possible that there’s some problem still with HTTPS and the Browser Sync proxy.

---

## Post 22 by @thargy — 2017-12-18T21:00:28Z

I’m stuck at this problem.

In the chrome console it show the following error message:

```
EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.
```

I think it might be connected. Can anybody help?

---

## Post 23 by @stevebasford — 2018-02-19T16:35:10Z

For me I fixed this problem by switching everything to http rather than https. Not sure why it fixed it but it did.

---

## Post 24 by @Gordon_Smith — 2018-03-06T17:59:11Z

Here’s an explanation: [Yarn run build Error | Dist folder permissions unchangeable](https://discourse.roots.io/t/yarn-run-build-error-dist-folder-permissions-unchangeable/11823/7?u=gordon_smith)