# Sage 9, npm start removes dist/style/main.css **URL:** https://discourse.roots.io/t/sage-9-npm-start-removes-dist-style-main-css/7838 **Category:** sage **Created:** 2016-10-07T00:21:31Z **Posts:** 15 ## Post 1 by @govnaah — 2016-10-07T00:21:31Z 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. --- ## Post 3 by @drawcardau — 2016-10-07T02:49:08Z 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. --- ## Post 4 by @alex_ciarlillo — 2016-10-11T17:08:22Z 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. --- ## Post 5 by @govnaah — 2016-10-12T08:54:46Z The problem was the **publicPath**. i had to change mine. Thanks @drawcardau --- ## Post 6 by @drawcardau — 2016-10-12T23:46:18Z > [@alex_ciarlillo](#): > > So is it normal to see a 404 for the main.css when running npm start? 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. --- ## Post 7 by @Ladislav_Sulc — 2017-01-10T18:47:34Z 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. --- ## Post 8 by @ben — 2017-01-10T20:13:00Z > [@Ladislav_Sulc](#): > > I have the same problem but this did not solve it. > [@Ladislav_Sulc](#): > > The same for JS. This is not the same problem --- ## Post 9 by @Ladislav_Sulc — 2017-01-10T21:12:56Z 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. --- ## Post 10 by @raffjones — 2017-01-15T21:48:43Z 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 ? --- ## Post 11 by @jmarceli — 2017-01-16T07:09:17Z @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. --- ## Post 12 by @raffjones — 2017-01-16T08:31:37Z Thanks for clearing that up, @jmarceli. I guess I just need to spend a bit more time looking at the inner workings of Webpack. --- ## Post 13 by @donut — 2017-03-31T18:12:05Z 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? --- ## Post 14 by @drawcardau — 2017-04-01T02:26:39Z 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](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/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: > **[Flash of Unstyled Content (FOUC) Tutorial](https://docs.google.com/presentation/d/1jt_VQC5LDF-e9j8Wtxu4KZPa8ItlmYmntGy5tdcbGOY/present?slide=id.g16b58378_0_27)** > > Flash of Unstyled Content (FOUC) Tutorial --- ## Post 15 by @donut — 2017-04-03T14:15:37Z @drawcardau thank you very much, I’ll take a look into your suggestions.