browser-sync: Does not work with

I have been using a similar one as mentioned by @gijsroge. Only difference is disabling @import based on the CSS aggregation setting (rather than the environment variable which isn’t part of core).

/**
 * Implements hook_css_alter().
 *
 * Disables @import CSS tags for compatibility with BrowserSync.
 */
function HOOK_css_alter(&$css) {

  // Aggregation must be disabled.
  if (!variable_get('preprocess_css')) {

    // Disable @import on each css file.
    foreach ($css as &$item) {

      // Compatibility with disabling stylesheets in theme.info (263967).
      if (file_exists($item['data'])) {
        $item['preprocess'] = FALSE;
      }
    }
  }
}

similar to @skh-'s temp fix , but for Drupal 8:

/**
 * Implements hook_css_alter().
 *
 * Disables @import CSS tags for compatibility with BrowserSync CSS injection while developing.
 */
function YOURTHEMENAME_css_alter(&$css) {

  // get value from settings/local.settings
  $is_css_preprocess = \Drupal::config('system.performance')->get('css')['preprocess'];

  // Aggregation must be disabled.
  if (!$is_css_preprocess) {

    // Disable @import on each css file.
    foreach ($css as &$item) {

      // Compatibility with disabling stylesheets in theme.info (263967).
      if (file_exists($item['data'])) {
        $item['preprocess'] = FALSE;
      }
    }
  }
}

Here’s my use case: I have screen.css with a number of imports:

@import 'defaults.css';
@import 'fonts.css';
…

There are more nested imports in some files. And I don’t process my styles with anything to complie a single file, I just don’t need to. What I need is BS to watch files and push changes to browser. But only changes in screen.css propagate to browser. Changes in imported files detected too, but BS don’t push them.

That’s how I start watcher:

browser-sync start --server --no-notify --no-ui --files 'index.html, styles/**'

Is it even possible to properly push changes from imported files? Is there a workaround for that, apart from reloading the whole page? Thank you.

A temp fix:

Place this in your template.php and it will generate link tags instead of @import’s in your local environment.

function YOUR_THEME_css_alter(&$css) {
/**
   * Generate link tags instead of @import
   */
  $environment = variable_get('environment');
  if ($environment == 'development') {
    // Alter css to display as link tags.
    foreach ($css as $key => $value) {
      $css[$key]['preprocess'] = FALSE;
    }
  }
}

browser-sync start --server "." --files "**/*.*" --no-inject-changes

works perfectly for me.