{"id":979,"date":"2024-01-03T17:07:07","date_gmt":"2024-01-03T11:37:07","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=979"},"modified":"2025-01-11T23:13:39","modified_gmt":"2025-01-11T17:43:39","slug":"how-to-add-remove-css-and-js-file-in-magento-2","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/how-to-add-remove-css-and-js-file-in-magento-2\/","title":{"rendered":"How to Add\/Remove CSS and JS file in Magento 2"},"content":{"rendered":"\n

Hello Everyone,<\/p>\n\n\n\n

In this blog, we will learn about how to Add\/Remove CSS and JS File in Magento 2.<\/p>\n\n\n\n

We explain the following topics in this blog.<\/p>\n\n\n\n

    \n
  1. How to add CSS and JS file on all pages<\/li>\n\n\n\n
  2. How to remove CSS and JS file on all pages<\/li>\n\n\n\n
  3. How to add CSS and JS file on specific page<\/li>\n\n\n\n
  4. How to remove CSS and JS file on specific page<\/li>\n\n\n\n
  5. How to add CSS and JS files from Theme<\/li>\n\n\n\n
  6. How to remove CSS and JS files from Theme<\/li>\n<\/ol>\n\n\n\n

    Without wasting your time, let us guide you straight away. Follow the easy step given below to Create Plugin in Magento 2.<\/p>\n\n\n\n

    STEPS FOR ADD \/ REMOVE CSS AND JS FILE  IN MAGENTO 2<\/strong><\/p>\n\n\n\n

      \n
    1. Add CSS\/JS on all pages<\/strong><\/li>\n<\/ol>\n\n\n\n

      Step 1: Create default.xml file<\/strong><\/p>\n\n\n\n

      app\/code\/Vendor\/Extension\/view\/frontend\/layout\/default.xml<\/strong><\/p>\n\n\n

      \n<?xml version="1.0" encoding="UTF-8"?>\n\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<head>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<css src="Vendor_Extension::css\/custom.css" \/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script src="Vendor_Extension::js\/custom.js" \/>\n\n\u00a0\u00a0\u00a0\u00a0<\/head>\n\n<\/page>\n<\/pre><\/div>\n\n\n
        \n
      1. Remove CSS\/JS from all pages<\/strong><\/li>\n<\/ol>\n\n\n\n
        Step 1: Create default.xml file<\/strong><\/p>\n\n\n\n
        app\/code\/Vendor\/Extension\/view\/frontend\/layout\/default.xml<\/strong><\/p>\n\n\n
        \n<?xml version="1.0" encoding="UTF-8"?>\n\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<head>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<remove src="Vendor_Extension::css\/custom.css"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<remove src="Vendor_Extension::js\/custom.js"\/>\n\n\u00a0\u00a0\u00a0\u00a0<\/head>\n\n<\/page>\n<\/pre><\/div>\n\n\n
          \n
        1. Add CSS\/JS on specific page<\/strong><\/li>\n<\/ol>\n\n\n\n
          Step 1: Create route_controller_action.xml file<\/strong><\/p>\n\n\n\n
          app\/code\/Vendor\/Extension\/view\/frontend\/layout\/route_controller_action.xml<\/strong><\/p>\n\n\n
          \n<?xml version="1.0" encoding="UTF-8"?>\n\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<head>\n\n<!-- Add local files -->\n\n<css src="Vendor_Extension::css\/custom.css" \/>\n\n<script src="Vendor_Extension::js\/custom.js" \/>\n\n<!-- Add external files -->\n\n<css src="https:\/\/magecurious.com\/custom.css" src_type="url" \/>\n\n<script src="https:\/\/magecurious.com\/custom.js" src_type="url" \/>\n\n<link href="https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">\n\n\u00a0\u00a0\u00a0\u00a0<\/head>\n\n<\/page>\n<\/pre><\/div>\n\n\n
            \n
          1. Remove CSS\/JS from specific page<\/strong><\/li>\n<\/ol>\n\n\n\n
            Step 1: Create route_controller_action.xml file<\/strong><\/p>\n\n\n\n
            app\/code\/Vendor\/Extension\/view\/frontend\/layout\/route_controller_action.xml<\/strong><\/p>\n\n\n
            \n<?xml version="1.0" encoding="UTF-8"?>\n\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<head>\n\n<!-- Remove local files -->\n\n<remove src="Vendor_Extension::css\/custom.css"\/>\n\n<remove src="Vendor_Extension::js\/custom.js"\/>\n\n<!-- Remove external files -->\n\n<remove src="https:\/\/magecurious.com\/custom.css"\/>\n\n<remove src="https:\/\/magecurious.com\/custom.js"\/>\n\n<remove src="http:\/\/fonts.googleapis.com\/css?family=Roboto:wght@100" \/>\n\n\u00a0\u00a0\u00a0\u00a0<\/head>\n\n<\/page>\n<\/pre><\/div>\n\n\n
              \n
            1. Add CSS\/JS on Theme<\/strong><\/li>\n<\/ol>\n\n\n\n
              Step 1: Create default.xml file<\/strong><\/p>\n\n\n\n
              app\/design\/frontend\/Vendor\/theme\/Magento_Theme\/layout\/default_head_blocks.xml<\/strong><\/p>\n\n\n
              \n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n\n<head>\n\n\u00a0\u00a0\u00a0 <!-- Add local files -->\n\n<css src="css\/custom.css" \/>\n\n<script src="js\/custom.js" \/>\n\n<css src="Vendor_Extension::css\/custom.css" \/>\n\n<script src="Vendor_Extension::js\/custom.js" \/>\n\n<!-- Add external files -->\n\n<css src="https:\/\/magecurious.com\/custom.css" src_type="url" \/>\n\n<script src="https:\/\/magecurious.com\/custom.js" src_type="url" \/>\n\n<link rel="stylesheet" type="text\/css" src="http:\/\/fonts.googleapis.com\/css?family=Roboto:wght@100" src_type="url" \/>\n\n<\/head>\n\n<\/page>\n<\/pre><\/div>\n\n\n
                \n
              1. Remove CSS\/JS on Theme<\/strong><\/li>\n<\/ol>\n\n\n\n
                Step 1: Create default.xml file<\/strong><\/p>\n\n\n\n
                app\/design\/frontend\/Vendor\/theme\/Magento_Theme\/layout\/default_head_blocks.xml<\/strong><\/p>\n\n\n
                \n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n\n\u00a0\u00a0\u00a0<head>\n\n<!-- Remove local files -->\n\n<remove src="css\/custom.css" \/>\n\n<remove src="js\/custom.js"\/>\n\n<remove src="Vendor_Extension::css\/custom.css" \/>\n\n<remove src="Vendor_Extension::js\/custom.js" \/>\n\n<!-- Remove external files -->\n\n<remove src="https:\/\/magecurious.com\/custom.css"\/>\n\n<remove src="https:\/\/magecurious.com\/custom.js"\/>\n\n<remove src="http:\/\/fonts.googleapis.com\/css?family=Roboto:wght@100" \/>\n\n\u00a0\u00a0\u00a0<\/head>\n\n<\/page>\n<\/pre><\/div>\n\n\n
                Final Thoughts:<\/strong><\/p>\n\n\n\n
                So this was the easiest way which we have told you in this blog. This is how you can Add or Remove CSS or JS Files in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n
                So quickly go to the comment box and tell me how you like this blog?<\/p>\n\n\n\n
                Stay tuned with us on our site to get new updates of Magento.<\/strong><\/p>\n\n\n\n
                Thanks for reading and visiting our site.<\/p>\n\n\n
                      
                          
                        How useful was this post?      <\/p>              
                        Click on a star to rate it!      <\/p>        
                      
                                    
                •               <\/i>          <\/li>                  
                •               <\/i>          <\/li>                  
                •               <\/i>          <\/li>                  
                •               <\/i>          <\/li>                  
                •               <\/i>          <\/li>              <\/ul>    <\/div>    
                  <\/p>