Divi theme and WP SCSS plugin conflict fix

CHALLENGE: SCSS changes are not visible in compiled style.css

SOLUTION: remove Divi action for changing assets versioning

The WP-SCSS plugin is a convenient way to use SASS styles in your child theme. When you have the “Always Recompile” option enabled, the target CSS file will be compiled on every page refresh, the Plugin is adding ?ver=1631544470 param to the enqueued assets, which is the timestamp of the last file change. This solution prevents the browser from caching the file. As a result, on each request the browser considers style.css as a new file and reloads its content.

Divi theme assets conflict

Divi in version 4.10.4 is conflicted with the WP-SCSS plugin. Divi function et_requeue_child_theme_styles() is overwriting the wp_enqueue_scripts action and changing the versioning of the assets. Ver param will be read from the child style.css comment section (Version value). The version number is a static value, so a browser will probably cache the content, and new SCSS changes will not be visible. In addition, some servers / caching proxies – are caching static files (CSS / JS), so even clearing browser cache will not help with seeing the recent version of a compiled file.

Pluggable function

Our parent theme Divi is using Pluggable Function, which we can easily overwrite in the child theme functions.php file. For development, we will be using the time() function that will add the current timestamp (unix time) to the child style.css file. We will see CSS change instantly! For production environment – it is recommended to add a static version number.

// child theme functions.php
if ( ! function_exists( 'et_requeue_child_theme_styles' ) ) :
   function et_requeue_child_theme_styles() {
      if ( is_child_theme() ) {
         global $shortname;
         // fix for WP-SCSS style.css not refreshing
         // for production - change to static number
         $theme_version          = time();
         $template_directory_uri = preg_quote( get_stylesheet_directory_uri(), '/' );
         $styles                 = wp_styles();
         $inline_style_suffix    = et_core_is_inline_stylesheet_enabled() && et_use_dynamic_css() ? '-inline' : '';
         $style_dep              = array( $shortname . '-style-parent' . $inline_style_suffix );
         if ( empty( $styles->registered ) ) {
            return;
         }
         foreach ( $styles->registered as $handle => $style ) {
            if ( preg_match( '/' . $template_directory_uri . '.*/', $style->src ) ) {
               et_core_replace_enqueued_style( $style->src, '', $theme_version, '', $style_dep, false );
            }
         }
      }
   }
endif;

Removing action

Another solution will be to “remove” the problematic Divi function. We can use the remove_action function that will be triggered on “init” hook. This fix will solve the WP-SCSS and Divi theme conflict.

// child theme functions.php
/**
 *  Fix Divi theme and WP-SCSS plugin conflict (revert adding custom ver assets param for child CSS file)
 */
add_action("init","ct_fix_divi_assets_ver");
function ct_fix_divi_assets_ver(){
   remove_action( 'wp_enqueue_scripts', 'et_requeue_child_theme_styles', 99999999 );
}

That’s it for today. Make sure you follow us for other useful tips and guidelines.