Removing all the Default Theme Javascript and CSS from a WordPress Template.

Why?

Case : Using a VueJS Application in a WordPress Plugin and Theme CSS is Clashing.

There are some default CSS/JS which are included in every page + there is the Theme CSS which is also included on every page. I did not required any for it to work on my page. Since you are reading this page your requirement would be similar

How?

Strategy

On `wp_enqueue_scripts` hook usually add our own scripts, so before adding our own CSS/JS we will dequeue all the scripts and style.

Code

The following is an example function that I use.

function goals_enqueue_stuff() {

  if ( is_page_template( wp_normalize_path(plugin_dir_path( __FILE__ ) . 'templates\goals_vue_app.php') ) ) 
  {


    //  Removing all Scripts. 
    global $wp_scripts;
    foreach( $wp_scripts->queue as $script ) :
         wp_dequeue_script( $script );
    endforeach;

    // Removing all Styles
    global $wp_styles;
    foreach( $wp_styles->queue as $style ) :
        wp_dequeue_style( $style );
    endforeach;


   wp_enqueue_media();
    wp_enqueue_style( 'goal-routine-css', plugin_dir_url( __FILE__ ) . 'goal-app/dist/assets/index.css');
    wp_enqueue_script( 'goal-routine-module', plugin_dir_url( __FILE__ ) . 'goal-app/dist/assets/index.js');
    wp_enqueue_script( 'goal-routine-modulepreload', plugin_dir_url( __FILE__ ) . 'goal-app/dist/assets/vendor.js');
  } 
}
add_action( 'wp_enqueue_scripts', 'goals_enqueue_stuff',1000 );