Loading image in SCSS

Yup, weird.

  • the browser shouldn’t even get to your image if it did not find main.css. (Although the ABORTED error might come from hot-reloading/browsersync, not sure about that.)
  • anyway, your publicPath (wp-content/...) is missing from the image’s path, which either means a misconfiguration of the dev server (like a wrong publicPath in config.json) or somehow you get an absolute path in your compiled CSS, thus, again:
  • what does your compiled CSS say? Does dist/styles/main.css exist? How is hero.jpg referenced there?

I had an issue with absolute paths recently, but I tried to run WP in a subdirectory locally/on the dev server (test.dev/example.com/wp-content), and in root for production (example.com/wp-content) and found that this setup just causes headaches… But I guess your problem is different.