BrowserSynch does not load CSS

sage
1

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”,
“proxyUrl”: “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?

2

It may be a rare case, but I still link to it in case it helps someone else:

3

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

4

Are the paths correct, notably the dev/site URLs and the local theme path?

5

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"
  ]
6

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/”
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:

7

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.

9

@PrecisionCoder13 @strarsis Apperanlty is unable to load the main.css file. Any ideas? I’ve tried everything even restarting my computer.

image
image1355×881 97.7 KB

10

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

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.

11

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.

12

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.

13

So far these are the errors I have

image
image1370×541 70.8 KB

Its failing to load the main.js and the main.css file from dist/scripts or dist/style

14

Were you able to find a commit where it works?

15

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.

16

git bisect can make that process much faster and easier: https://git-scm.com/docs/git-bisect

17

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?

18

https://git-scm.com/docs/git-diff

19

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.

20

This topic was automatically closed after 42 days. New replies are no longer allowed.