Browsersync not injecting CSS or JS files

Created on 8 October 2019, almost 5 years ago

Updated 9 June 2023, over 1 year ago

Dear Community,

I got a problem with the current implementation of browsersync with laravel-mix.

The subtheme generation and installation went smoothly without any problems.
The local generation of SASS and JS also works without any problems.

But when I try to Browsersync with a "live" website, the changed/generated CSS and JS is not being injected into the browser.

What did I do?

As mentioned in the documentation after generating and enabling the subtheme I changed the proxy entry in the webpack.mix.js to "https://"
And yes, my domain is working on HTTPS with a valid certificate.

The command "npm run watch" does open up "https://localhost:3000", my website is being shown and on the top right I get a short notification with "Browsersync: connected" but no matter if I change a SCSS or JS file, these aren't being injected into the DOM.

After changing a SCSS or JS file the Terminal window does "regenerate" the files since there has been a change. So its not like it does'nt recognise the changes.

Performing an "npm run watch" on the Live-Server and changing SCSS or JS Files does indeed work so its not like the style.css or the subtheme.script.js aren't being generated correctly or they are not being integrated in Drupal.

And I dont get any JS errors in the browser JS console. Tried it on Chrome 77, Safari 13.0.1 and Firefox 69.0.2

Any ideas?

Drupal Version 8.7.8
Radix 8.x-4.5

NodeJS 10.16.3
browser-sync 2.26.7
browser-sync-webpack-plugin 2.2.2

🐛 Bug report

Status

Closed: won't fix

Version

4.0

Component

Code

Created by

🇦🇹Austria kevin.pfeifer

Live updates comments and jobs are added and updated live.

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment over 1 year ago →

mikcat

Hello,

I had the same requirement today, after some research I managed to refresh the main.style.css adding serveStatic and rewriteRules to the current browserSync config:

mix.browserSync({
  proxy: proxy.proxy,  // remote/live site url
  files: [
    'build/js/**/*.js',
    'build/css/**/*.css',
    'build/components/**/*.css',
    'build/components/**/*.js',
    'src/**/*.twig',
    'templates/**/*.twig',
  ],
  stream: true,
  serveStatic: ['./build'],
  rewriteRules: [
    {
      match: new RegExp('/themes/custom/custom-theme-name/build/css/main.style.css'),
      fn: function () {
        return '/css/main.style.css';
      }
    }
  ]
});

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024