# BrowserSynch does not load CSS **URL:** https://discourse.roots.io/t/browsersynch-does-not-load-css/17668 **Category:** sage **Tags:** sage9 **Created:** 2020-02-18T15:52:44Z **Posts:** 19 ## Post 1 by @Fernando_Jimenez — 2020-02-18T15:52:44Z for some reason every time I run “yarn start” all css appears to be broken. I am using MAMP on windows and things used to work but now it doesn’t. The url for my site is `http://localhost.com/nat-production` This is how config.json file looks like { “entry”: { “main”: [ “./scripts/main.js”, “./styles/main.scss” ], “customizer”: [ “./scripts/customizer.js” ] }, “publicPath”: “/wp-content/themes/NebraskaTheme/”, “devUrl”: “[http://localhost/nbadvocates](http://localhost/nbadvocates)”, “proxyUrl”: “[http://localhost:3000](http://localhost:3000)”, “cacheBusting”: “[name]\_[hash:8]”, “watch”: [ “app/**/\*.php", "config/**/_.php", "resources/views/\*\*/_.php” ] } This is how my config.js looks like ``` const config = merge({ open: true, copy: 'images/**/*', proxyUrl: 'http://localhost:81', cacheBusting: '[name]_[hash]', paths: { root: rootPath, assets: path.join(rootPath, 'resources/assets'), dist: path.join(rootPath, 'dist'), }, enabled: { sourceMaps: !isProduction, optimize: isProduction, cacheBusting: isProduction, watcher: !!argv.watch, }, watch: [], }, userConfig); ``` Any ideas on how to troubleshoot this? --- ## Post 2 by @strarsis — 2020-02-18T16:09:40Z It may be a rare case, but I still link to it in case it helps someone else: > [@Sage 9 + BrowserSync not loading any CSS at all on 'yarn run start'](https://discourse.roots.io/t/sage-9-browsersync-not-loading-any-css-at-all-on-yarn-run-start/11332/26): > > @Simeon: Edit: According to author BrowserSync has to be configured with advanced key: new BrowserSyncPlugin({ target, open: config.open, proxyUrl: config.proxyUrl, watch: config.watch, delay: 500, advanced: { browserSync: { cors: true, }, }, }), Related issues: --- ## Post 3 by @Fernando_Jimenez — 2020-02-18T16:21:29Z Yeah that is how my webpack.config.watch.js looks like ``` const url = require('url'); const webpack = require('webpack'); const BrowserSyncPlugin = require('browsersync-webpack-plugin'); const config = require('./config'); const target = process.env.DEVURL || config.devUrl; /** * We do this to enable injection over SSL. */ if (url.parse(target).protocol === 'https:') { process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0; config.proxyUrl = config.proxyUrl.replace('http:', 'https:'); } module.exports = { output: { pathinfo: true, publicPath: config.proxyUrl + config.publicPath, }, devtool: '#cheap-module-source-map', stats: false, plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new BrowserSyncPlugin({ target, open: config.open, proxyUrl: config.proxyUrl, watch: config.watch, delay: 500, advanced: { browserSync: { cors: true, }, }, }), ], }; ``` the weird thing is that if I run` yarn start` the css is nowhere, and also on the non-Browsersync mode, it breaks my css too unless I run yarn build again then it gets fixed --- ## Post 4 by @strarsis — 2020-02-18T18:34:31Z Are the paths correct, notably the dev/site URLs and the local theme path? --- ## Post 5 by @Fernando_Jimenez — 2020-02-18T20:40:16Z It looks right, I did double check and the path seems correct. Here is the weird part, When i run `yarn start` and the stopped (Ctrl + C) then my css is broken on localhost/nat-production (without the 3000 port on it)… I have to run yarn build so it loads the css correctly. All this I THINK (not sure) happened when i ran yarn build:production something there kind of messed things up. Any idea if that could’ve cause the issue? ``` "publicPath": "/wp-content/themes/NebraskaTheme/", "devUrl": "http://localhost/nat-production/", "proxyUrl": "http://localhost:3000", "cacheBusting": "[name]_[hash:8]", "watch": [ "app/**/*.php", "config/**/*.php", "resources/views/**/*.php" ] ``` --- ## Post 6 by @PrecisionCoder13 — 2020-02-19T15:19:39Z > yarn start > It’s used for run time implementation and testing for scss and js changes. It’s not your final build, so you have to build after finishing your scss and js related fixes. > yarn build > It’s used for your local development testing which performs optimisation for your theme. > yarn build: production > You have to perform `yarn build:production` as your final action before moving your site to live environment. It’s perform optimisation of your assets and store in **dist** folder. > “devUrl”: “[http://localhost/nat-production/](http://localhost/nat-production/)” > The url you use for access your site in local environment. If your moving your site to live server, you have to make changes in this path based on your folder structure. And once fire the `yarn build:production` before going live. Hope this helps…:+1: --- ## Post 7 by @Fernando_Jimenez — 2020-02-19T15:57:30Z the thing I still don’t understand is why when I run `yarn start` it displays the site with a broken CSS then if I just try to run locally (without localhost:3000) it’s broken too unless I run `yarn build` again. --- ## Post 9 by @Fernando_Jimenez — 2020-02-19T17:33:05Z @PrecisionCoder13 @strarsis Apperanlty is unable to load the main.css file. Any ideas? I’ve tried everything even restarting my computer. ![image](https://discourse.roots.io/uploads/default/original/2X/4/46e40a02e4bd9d07393c7d7d404dd36f9b8d9767.png) --- ## Post 10 by @alwaysblank — 2020-02-19T18:20:54Z This is by design. It’s documented in the Sage documentation: [https://roots.io/sage/docs/theme-development-and-building/#asset-generation-with-yarn-build-vs-yarn-start](https://roots.io/sage/docs/theme-development-and-building/#asset-generation-with-yarn-build-vs-yarn-start) Because CSS/JS changes are updated with HMR, they’re inserted directly into the DOM and not loaded from a file. Because of they way they’re built during that process, they aren’t rendered out into a file. IIRC `main.css` is removed by `yarn start` so that its rules don’t conflict with the ones being loaded into the DOM directly. --- ## Post 11 by @Fernando_Jimenez — 2020-02-19T18:26:12Z So how can I load the site using `yarn start` It used to work but for some reason, it stopped working. I tried changing ports, restarting, clearing cache on yarn but it still doesn’t load any CSS when running yarn start is not until i rebuild it again. --- ## Post 12 by @alwaysblank — 2020-02-19T18:39:52Z The first step would be to determine if you’ve changed anything during development that could have affected it. I would recommend going back through your commit history and seeing if you can find a commit where it works. If so, you can use `git bisect` to identify the exact changes that caused this problem. You could also look at the console log in your browser’s inspector to see if it’s throwing any errors that look like they might be related. --- ## Post 13 by @Fernando_Jimenez — 2020-02-19T18:52:15Z So far these are the errors I have ![image](https://discourse.roots.io/uploads/default/original/2X/4/44c297a2e80948bbdc8088750b8bb37ac13b191a.png) Its failing to load the main.js and the main.css file from dist/scripts or dist/style --- ## Post 14 by @alwaysblank — 2020-02-19T18:53:31Z Were you able to find a commit where it works? --- ## Post 15 by @Fernando_Jimenez — 2020-02-19T19:00:15Z I did actually, now I am going from one commit to another until it i find the one that broke everything. I’ll share it here once i find out what it was. --- ## Post 16 by @alwaysblank — 2020-02-19T19:25:48Z `git bisect` can make that process much faster and easier: [https://git-scm.com/docs/git-bisect](https://git-scm.com/docs/git-bisect) --- ## Post 17 by @Fernando_Jimenez — 2020-02-19T22:28:06Z Found it! I got the commit that started this whole mess, what I don’t know what to do is how to compare one commit with another to see where were the changes on this particular commit. Whats is the best git way to compare one commit with the other? --- ## Post 18 by @alwaysblank — 2020-02-19T22:36:20Z [https://git-scm.com/docs/git-diff](https://git-scm.com/docs/git-diff) --- ## Post 19 by @Fernando_Jimenez — 2020-02-20T16:51:54Z Got it! it works now. So I’ll share what happened. Basically there was a time I was trying to do a route to run a specific javascript on a specific page. For that, I created a local dependency on main.js ` import locations from '.route/locations` This was so I could have ACF Google Maps field load on my location pages. For that, I had to add some stuff on the webpack.config.js file to basically imported some external js so I changed my webpack file like this (its all the google stuff i highligted as code … Not sure how or why but that messed up Browsersync ``` externals: { jquery: 'jQuery', ``` ` google: 'google',` }, plugins: [ new CleanPlugin([config.paths.dist], { root: config.paths.root, verbose: false, }), /\*\* \* It would be nice to switch to copy-webpack-plugin, but \* unfortunately it doesn’t provide a reliable way of \* tracking the before/after file names \*/ new CopyGlobsPlugin({ pattern: config.copy, output: [path]${assetsFilenames}.[ext], manifest: config.manifest, }), new ExtractTextPlugin({ filename: styles/${assetsFilenames}.css, allChunks: true, disable: (config.enabled.watcher), }), new webpack.ProvidePlugin({ $: ‘jquery’, jQuery: ‘jquery’, ‘window.jQuery’: ‘jquery’, `'window.Google': 'jquery',` Popper: ‘popper.js/dist/umd/popper.js’, }), Long story short I gave up on this dependency and commented out since I was going to go back to it later but never did. I guess i have to be careful with changing stuff on webpack.config.js if you do MAKE SURE YOU RECORD what you did. Anyways I hope this helps someone in the future. --- ## Post 20 by @system — 2020-03-31T15:52:47Z This topic was automatically closed after 42 days. New replies are no longer allowed.