Sage 9, npm start removes dist/style/main.css

Hi all,

I’m running sage 9. When i run npm run build the dist folder is complete. After, i run npm start dist/style/main.css is not there anymore although the browsersync loaded shows that there is main.css, when i make changes to .scss, i don’t see any change in the browser. until i run npm run build.

please, can anyone help.

thank you.

main.css isn’t there because the css rules are injected into the browser via JS when you’re watching the theme folder with npm start. It will be there however when you build the theme for production.

If you can’t see changes while editing while running npm start then I think something is up with your config.json settings. Check your devURL and proxyURL match your environment. Mine look like this (for a Vagrant VM running on a Mac host):

  "publicPath": "/wp-content/themes/sandbox",
  "devUrl": "http://192.168.33.10/clients/sandbox/www", // This is the address for my site
  "proxyUrl": "http://localhost:3000/", // This is the address BrowserSync is served from in my VM
  "cacheBusting": "[name]_[hash:8]"

So when I visit http://192.168.33.10:3000/clients/sandbox/www everything works.

So is it normal to see a 404 for the main.css when running npm start? I understand the JS/CSS are being loaded in by Webpack, but due to the theme enqueing sage/main.css in setup.php the page is throwing a 404 since dist/styles/main.css does not exist when not building for production.

1 Like

The problem was the publicPath. i had to change mine.
Thanks @drawcardau

2 Likes

Yep, it threw me at first too. But when running npm start which launches BrowserSync, this is how it should be. Eventually you’d run npm build to compile the finished theme before distribution, to properly compile everything.

Hi,

I have the same problem but this did not solve it. Using Yarn and when looking at localhost URL, it shows in the source code link to the dist/main.css which doesn’t exist. The same for JS.

Any idea?

Thank you.

This is not the same problem

Sorry, I didn’t want to create a new topic, similar though. I just can’t make it load local CSS and JS despite the json being properly set up. The dist folder is in the URL yet it does not exist. So I have a properly displayed page just without CSS and JS.

I was experiencing this issue. Everything had been working fine, but suddenly stopped, and my CSS was never being built during npm run watch. It would just sit there saying “Watching files” but nothing would ever be triggered.

So I backtracked through my steps and traced it to this: if you remove or comment out line 16 in src/lib/setup.php - the one that has wp_enqueue_script- then the whole npm run watch ceases to function, and the CSS is never rebuilt.

I just don’t need the scripts as I’m only building a holding page at this point. I can’t see why there needs to be an attempt to load main.js script for the overall npm script to work. If I uncomment this line, then it all works again. Strange. Any thoughts, Ben W ?

@raffjones this is perfectly normal. As far as I know Webpack loads CSS through JS with import directive so if you disable JS enqueuing CSS won’t be loaded as well. The only solution I can think of is to conditionally enable wp_enqueue_script when running in a development environment.

Thanks for clearing that up, @jmarceli. I guess I just need to spend a bit more time looking at the inner workings of Webpack.

My config seems correct, the css and js load fine, but I do get a flash of un-styled page, to a style page. So there is flash of nothing just html elements, and then everything is styled. Any idea what this might be?

There could be a range of reasons why you’re seeing the FOUC / flash of unstyled content. Sometimes the ordering is incorrect (eg a big JS file is loading before your CSS file is) or a web font is slowing down the CSS loading process. Maybe your SCSS file is not optimized, and it’s generating a CSS file that takes too long to load (this happened to me once, when I used @extend + nesting too much & end up with a giant 500kb CSS file). The way I like to diagnose this is by using the Timeline tool in Chrome Inspector and turn on “Screenshots” to see what’s going on. This will tell you if there’s anything clogging up the page rendering.

Also take a look at:

1 Like

@drawcardau thank you very much, I’ll take a look into your suggestions.