Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    Tags

    Divi theme and WP SCSS plugin conflict fix

    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.

    Comments
    0 response

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    Digital marketing without third-party cookies – new rules
    • Technology
    • Trends

    Digital marketing without third-party cookies – new rules

    February 21, 2024 by createIT
    eCommerce healthcheck
    • Services
    • Trends

    eCommerce healthcheck

    January 24, 2024 by createIT
    Live Visitor Count in WooCommerce with SSE
    • Dev Tips and Tricks

    Live Visitor Count in WooCommerce with SSE

    December 12, 2023 by createIT
    Calculate shipping costs programmatically in WooCommerce
    • Dev Tips and Tricks

    Calculate shipping costs programmatically in WooCommerce

    December 11, 2023 by createIT
    Designing a cookie consent modal certified by TCF IAB
    • Dev Tips and Tricks

    Designing a cookie consent modal certified by TCF IAB

    December 7, 2023 by createIT
    Understanding the IAB’s Global Vendor List (GVL)
    • Dev Tips and Tricks

    Understanding the IAB’s Global Vendor List (GVL)

    December 6, 2023 by createIT
    Effortlessly transform JSON data into a clear schema
    • Uncategorized

    Effortlessly transform JSON data into a clear schema

    December 5, 2023 by createIT
    Anatomy of WordPress malware: a technical deep dive
    • Dev Tips and Tricks
    • Technology

    Anatomy of WordPress malware: a technical deep dive

    December 4, 2023 by createIT
    Initializing CMP with the Stub Script and cmpapi.js
    • Dev Tips and Tricks

    Initializing CMP with the Stub Script and cmpapi.js

    November 29, 2023 by createIT

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us