Browsersyc not working properly on blade update / fonts / scss changes

sage
,
1

I’ve started a new project using bedrock and sage9. Browsersync looks like it’s loading but it’s not responding to any changes in any files. Even a build doesn’t get the CSS compiling, there is no styles folder in the dist folder.

naomispirit@Naomis-MacBook-Pro pdc % yarn run start
yarn run v1.22.10
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

Webpack is watching the files…

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.


 DONE  Compiled successfully in 1277ms                                                                                                       08:08:59

[HTML Injector] Running...
[Browsersync] Proxying: http://localhost
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.122:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...


 DONE  Compiled successfully in 653ms

In case it helps others, I followed another thread Sage 9 + BrowserSync not loading any CSS at all on 'yarn run start' - #26 by strarsis and found this fix
`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,
    },
  },
}),`

I’ve implemented this and it makes the scss changes work - yeah! But still not getting browsersync updates when I make a change to other files. I can go and refresh the page to see these now which is a big improvement from no CSS compiling at all but its still a bit annoying in the workflow. Would love to know how to fix it.

1 Like
2

Trying to implement a font now and also running into issues, having previously used almost identical code on another sage project where it works perfectly.

I have created a _fonts.scss file with the following

@font-face {
  font-family: "Glyphter";
  src: url("../fonts/Glyphter.eot");
  src:
    url("../fonts/Glyphter.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Glyphter.woff") format("woff"),
    url("../fonts/Glyphter.ttf") format("truetype"),
    url("../fonts/Glyphter.svg#Glyphter") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class*="icon-"]::before {
  display: inline-block;
  font-family: "Glyphter";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-icon-close::before { content: "\0041"; }
.icon-icon-contact-arrow::before { content: "\0042"; }
.icon-icon-facebook::before { content: "\0043"; }
.icon-icon-instagram::before { content: "\0044"; }
.icon-icon-mail::before { content: "\0045"; }

$std-font: "IBM Plex Sans", sans-serif;
$contact-font: "Inter", sans-serif;`

And placed the fonts into the appropriate folder resources/asses/fonts

when I try and build I get the following error and the dist folder is missing

 ERROR  Failed to compile with 4 errors                     09:32:39

These relative modules were not found:

* ./fonts/Glyphter.eot in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/dist/cjs.js?{"postcssOptions":{"path":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets/build","ctx":{"open":true,"copy":"images/**/*","proxyUrl":"http://localhost:3000","cacheBusting":"[name]_[hash:8]","paths":{"root":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref","assets":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets","dist":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/dist"},"enabled":{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch":["app/**/*.php","config/**/*.php","resources/views/**/*.php"],"entry":{"main":["./scripts/main.js","./styles/main.scss"],"customizer":["./scripts/customizer.js"]},"publicPath":"/app/themes/pdcref/dist/","devUrl":"http://localhost","env":{"production":false,"development":true},"manifest":{}}},"sourceMap":true}!./node_modules/resolve-url-loader?{"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true,"sourceComments":true}!./node_modules/import-glob!./resources/assets/styles/main.scss
* ./fonts/Glyphter.svg in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/dist/cjs.js?{"postcssOptions":{"path":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets/build","ctx":{"open":true,"copy":"images/**/*","proxyUrl":"http://localhost:3000","cacheBusting":"[name]_[hash:8]","paths":{"root":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref","assets":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets","dist":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/dist"},"enabled":{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch":["app/**/*.php","config/**/*.php","resources/views/**/*.php"],"entry":{"main":["./scripts/main.js","./styles/main.scss"],"customizer":["./scripts/customizer.js"]},"publicPath":"/app/themes/pdcref/dist/","devUrl":"http://localhost","env":{"production":false,"development":true},"manifest":{}}},"sourceMap":true}!./node_modules/resolve-url-loader?{"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true,"sourceComments":true}!./node_modules/import-glob!./resources/assets/styles/main.scss
* ./fonts/Glyphter.ttf in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/dist/cjs.js?{"postcssOptions":{"path":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets/build","ctx":{"open":true,"copy":"images/**/*","proxyUrl":"http://localhost:3000","cacheBusting":"[name]_[hash:8]","paths":{"root":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref","assets":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets","dist":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/dist"},"enabled":{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch":["app/**/*.php","config/**/*.php","resources/views/**/*.php"],"entry":{"main":["./scripts/main.js","./styles/main.scss"],"customizer":["./scripts/customizer.js"]},"publicPath":"/app/themes/pdcref/dist/","devUrl":"http://localhost","env":{"production":false,"development":true},"manifest":{}}},"sourceMap":true}!./node_modules/resolve-url-loader?{"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true,"sourceComments":true}!./node_modules/import-glob!./resources/assets/styles/main.scss
* ./fonts/Glyphter.woff in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/dist/cjs.js?{"postcssOptions":{"path":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets/build","ctx":{"open":true,"copy":"images/**/*","proxyUrl":"http://localhost:3000","cacheBusting":"[name]_[hash:8]","paths":{"root":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref","assets":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets","dist":"/Users/naomispirit/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/dist"},"enabled":{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch":["app/**/*.php","config/**/*.php","resources/views/**/*.php"],"entry":{"main":["./scripts/main.js","./styles/main.scss"],"customizer":["./scripts/customizer.js"]},"publicPath":"/app/themes/pdcref/dist/","devUrl":"http://localhost","env":{"production":false,"development":true},"manifest":{}}},"sourceMap":true}!./node_modules/resolve-url-loader?{"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true,"sourceComments":true}!./node_modules/import-glob!./resources/assets/styles/main.scss