Solution to the problem of CSS changes not being reflected in real time in BrowserSync.

When using BrowserSync in WordPress development, there may be a problem that CSS changes are not reflected in real time. Especially when style.css of parent theme and child theme exist at the same time, BrowserSync monitors only changes in style.css of parent theme, and changes in child theme are not reflected.

Cause

BrowserSync specifies files to be monitored, and any changes are reflected in the browser in real time. However, due to the structure of WordPress themes, there may be style.css in each of the parent and child themes, and BrowserSync may give priority to monitor only the parent theme’s CSS, not the child theme’s.

Solution: Change the CSS file name of the child theme

The easiest solution is to rename the CSS files in the child theme. For example, by renaming style.css to child.css, BrowserSync will be able to distinguish it from the parent theme’s style.css and monitor it differently.

Procedure

1. Rename the style.css file in the WordPress child theme directory to child.css (or any name you like).
2. Edit the functions.php file of the child theme and add the code to load the new CSS file as follows

function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); 
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/child.css', array('parent-style')));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Notes.

After making this change, child.css will be loaded as the CSS file used by the theme, and CSS changes will be reflected in real time. Also, by adding child.css as a file to be monitored in the BrowserSync settings, CSS changes in the child theme will certainly be reflected in the browser.

Conclusion

The problem of CSS not being reflected in real time in the child theme can be solved by changing the CSS file name of the child theme. This way, BrowserSync will reliably monitor the child theme’s CSS files and improve development efficiency.