Here’s my config.json. Any tips?
{
"entry": {
"main": [
"./scripts/main.js",
"./styles/main.scss"
],
"customizer": [
"./scripts/customizer.js"
]
},
"publicPath": "/wp-content/themes/my-theme",
"devUrl": "http://mysite.test",
"proxyUrl": "http://localhost:3000",
"cacheBusting": "[name]_[hash:8]",
"watch": [
"app/**/*.php",
"config/**/*.php",
"resources/views/**/*.php"
]
}
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 
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
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({
target,
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!