Browser-Sync does not reload CSS

[webcultist]

Hello guys!
At first I want to thank you so much for your effort and the work you have done through this theme. It's exactly what I always wanted for Drupal and I planned to build on my own, so thank you so much!

So here my problem with Browser-Sync:
When I start gulp with the patternlab, everything works very well. The styles and the code gets update etc. (except for the small fact, that after starting the script, no style is visible, but after the first change, everything looks right), but when I change the gulpconfig to use my local project URL so it would reload my drupal 8 projekt, it does not reload the CSS.
It starts normally (http://pasteboard.co/6VmeLPhlu.png), but when changing something in the CSS, it stops after generating the css (http://pasteboard.co/6VmQxXj3t.png). Nothing happens after that. It still generates every change in CSS, but I have to reload on my own.

Interesting thing about this: When I change something in the twig files, it seems to break somewhere because of the missing Drupal Twig function "url" PHP Fatal error: Uncaught Twig_Error_Syntax: Unknown "url" function in. (http://pasteboard.co/6VpEj64Vj.png).

The best thing about this, after the template task breaks, it reloads the css correctly in the browser (http://pasteboard.co/6VvQPn9fH.png).

Do I miss something?

Thanks in advance :)

[EvanLovely]

You're welcome!! First question: is the CSS file loaded in Drupal using <link href='path/to/style.css' /> or with <style> @import('path/to/style.css');</style>? Sadly, browser sync doesn't work with @import.

As far as the url function goes; that is a Drupal Twig Function that is not a native Twig function; we add several mocked up Twig functions to Pattern Lab using the plugin-drupal-twig-components plugin. I just added a new url function to that plugin and then updated this repo to bring in that new url function. On your existing install, you can simply run this to get the updates:

cd pattern-lab
composer update

[webcultist]

Hello Evan.
I use link_css and therefore link tags, I used browser-sync before and had the problem with the imports.
Still have to problem. Seems to be something with the order of the gulp tasks. As long as the CSS task is going, it seems not to run the browser-sync watcher.
Any ideas what could be misconfigured?
Are you already running drupal 8 projects with this theme?

[EvanLovely]

Do you have browserSync.domain in gulpconfig.yml set to the URL of your Drupal site?

[webcultist]

Yep, also the openBrowserAtStart function works with the correct url.
Here the gulpconfig.yml if it helps: https://we.tl/3RDgBalAST

[EvanLovely]

Hmm.... not sure; are you able to get css style injection working using the browser-sync cli?

[webcultist]

Yep, works with "browser-sync start --files="./dest/*.css" --proxy="reko.dev""

[webcultist]

I still have the browser sync error with the reloading, but it's actually not what I would like to ask:
I tried to add a new filter function for render (https://github.com/webcultist/plugin-drupal-twig-components) but it seems not to work. I added the linked version to the pattern-lab composer.json, but I still get the error with the missing render function.

Do I miss something?

[webcultist]

I will close this, as it didn't happen anymore with newer projects.