Preview Customizer changes if generated as separate CSS file

For the purposes of updating color/font variables more quickly and cleanup site markup, I wanted to move the Customizer CSS that gets added in a <style> tag and into a CSS file.

I did this by creating a PHP file called variables.php that generates a variables.css file every time Customizer or ACF Options are saved.

// Generate variables.css
function generate_options_css() {
	$ss_dir = get_template_directory();
	ob_start();
	require($ss_dir . '/functions/variables.php');
	$css = ob_get_clean();
	file_put_contents($ss_dir . '/variables.css', $css, LOCK_EX);
}
add_action('acf/save_post', 'generate_options_css', 20);
add_action('customize_save_after', 'generate_options_css', 20);

By doing so, however, Customizer does not preview the changes in the Customizer preview pane.

Is there a way to preview the changes within Customizer’s preview window this way?

• This topic was modified 3 years, 7 months ago by Matt Ortega.