Yarn start says successfully compiling but nothing at localhost:3000 and CSS not working

Here’s my config.json. Any tips?

  "entry": {
    "main": [
    "customizer": [
  "publicPath": "/wp-content/themes/my-theme",
  "devUrl": "http://mysite.test", 
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [

What are you using for local development? MAMP? Valet? Vagrant? VVV? Is the WordPress site_url and home the same as the devUrl?

I’m using VVV and the WP site_url and home are the same as the devUrl :confused:

What version of Node are you on?

sorry - i am using version 8.11.3

when I remove the .blade extension of the custom template for my homepage, the site doesn’t load any css at all. when i put it back to .php.blade, i get the original css from sage showing, but none of my new stuff and none of any HTML i added to the template - even though when i run yarn build it shows that the files were compiled. however, it continues to show file compilation messages for the exact same edited files (anything that wasn’t in the original sage 9) every time i run yarn build, no matter whether i’ve edited them in the meantime or not:

   DONE  Compiled successfully in 7487ms                                                                                                                                      16:31:41

                                    Asset     Size  Chunks                    Chunk Names
                 fonts/NoeDisplayBold.eot   109 kB          [emitted]
              fonts/apercu-medium-pro.eot   119 kB          [emitted]
                fonts/apercu-bold-pro.eot   120 kB          [emitted]
  vendor/fontawesome-webfont_674f50d2.eot   166 kB          [emitted]
             fonts/apercu-medium-pro.woff  56.6 kB          [emitted]
            fonts/apercu-medium-pro.woff2    43 kB          [emitted]
              fonts/apercu-medium-pro.ttf   119 kB          [emitted]
              fonts/apercu-light-pro.woff  54.4 kB          [emitted]
             fonts/apercu-light-pro.woff2  41.4 kB          [emitted]
               fonts/apercu-light-pro.ttf   117 kB          [emitted]
               fonts/apercu-bold-pro.woff  55.7 kB          [emitted]
              fonts/apercu-bold-pro.woff2  42.2 kB          [emitted]
                fonts/apercu-bold-pro.ttf   119 kB          [emitted]
               fonts/apercu-light-pro.eot   118 kB          [emitted]
                fonts/NoeDisplayBold.woff  44.1 kB          [emitted]
vendor/fontawesome-webfont_af7ae505.woff2  77.2 kB          [emitted]
 vendor/fontawesome-webfont_fee66e71.woff    98 kB          [emitted]
  vendor/fontawesome-webfont_b06871f2.ttf   166 kB          [emitted]
  vendor/fontawesome-webfont_912ec66d.svg   444 kB          [emitted]  [big]
                          scripts/main.js   375 kB       0  [emitted]  [big]  main
                    scripts/customizer.js  3.25 kB       1  [emitted]         customizer
                          styles/main.css   234 kB       0  [emitted]         main
                      scripts/main.js.map   556 kB       0  [emitted]         main
                      styles/main.css.map  1.54 MB       0  [emitted]         main
                scripts/customizer.js.map  3.08 kB       1  [emitted]         customizer
                images/Illustration_3.png   901 kB          [emitted]  [big]
✨  Done in 19.76s.

Do the changes ever show up? Are you on Windows? Is VirtualBox the hypervisor for Vagrant (VVV)? VBox is known to be slow on Windows if you are.

Confirm for me: accessing the website via the devUrl that you’ve specified in your config.json does bring you to the site (regardless of the state of the CSS). Also, confirm the same for localhost:3000.

Is just the CSS not working? Are there any Stylelint errors? Does running yarn lint:styles show any issues?

Is the publicPath shared above correct for your WordPress installation? You don’t happen to be doing anything with installing WordPress in a subdirectory or anything different.

Is your site being server with HTTPS? Is https:// in site_url or home?

When using yarn start you are only accessing the site from the proxyUrl, correct?

Sorry for all the questions. I’m just trying to pin point what is wrong as according to your config.json everything should work.

There’s a bunch of stuff I usually try when troubleshooting the build process that I’ve collected here:

the changes never show up. i am on osx high sierra, and i’m using virtualbox as the hypervisor.

confirmed that the devUrl and localhost bring up the site.

i actually disabled stylelint because it was driving me nuts - will it still not compile because of indentation or spacing issues? i’m coming from sage 8…

i’m not 100% sure what you mean by this, but i’m almost positive it’s the correct path. do you think i need to add anything in front of /wp-content/themes/48north?

i have tried both http and https (because i’ve been reading the other threads). can you confirm which one i should be using?

i have tried to access from both the proxy and devUrl

thank you so much for being so thorough! i will take a look at your troubleshooting thread.

It should just match the devUrl. I tend to use HTTP for development since it’s less of a hassle.


Are you using Bootstrap as the CSS framework? If so, there is a known issue + temporary solution here:

i’m using foundation

i tried to uninstall and reinstall composer as per your suggestion, and then ranyarn build and yarn start. no luck :confused:

Was this all working before? Or did it stop working all of a sudden? Because if it was working before then I wonder if retracing your steps could help to identify the issue.

I just tried installing a clean install of Sage (dev-master) with the Foundation preset and it works (using Valet as my development environment). I wonder if the issue has to do with the environment. Could you try creating/activating a new Sage install (with Foundation) within your themes directory just to confirm that that works?

Also, are there any errors in the browser console when you navigate to localhost:3000?

doing that now, but this is a brand new sage install as of this AM. i’ve been trying to get it working all day. to confirm, when the message in the console asks:

 Are you sure you want to overwrite the following files?
 - styles/common/_variables.scss
 - styles/components/_comments.scss
 - styles/components/_forms.scss
 - styles/components/_wp-classes.scss
 - styles/layouts/_header.scss

 (yes/no) [no]:

I’m supposed to write “yes” in order to be able to configure foundation correctly, correct?

Yes, the installer will just change out the Bootstrap defaults for the Foundation equivalents.

I’m not sure if this will be helpful at all, but in resources/assets/build/webpack.config.watch.js, temporarily add the following so we can get some useful debugging output:

    new BrowserSyncPlugin({
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
+     advanced: {
+       browserSync: {
+         logLevel: 'debug',
+       },
+     },

This will give a verbose output of what is happening with Browsersync which isn’t necessarily the problem. If there are any errors in the output, share them here, otherwise, you can remove the prescribed code.

I’ve had this same issue a couple of times. Having everything working at the end of yesterday and after running yarn start, it should’ve compiled properly.

In the end I had to run yarn build, refresh the browser and everything worked fine for me!

1 Like