Hello Everyone,
In this blog, we will learn about how to Add/Remove CSS and JS File in Magento 2.
We explain the following topics in this blog.
- How to add CSS and JS file on all pages
- How to remove CSS and JS file on all pages
- How to add CSS and JS file on specific page
- How to remove CSS and JS file on specific page
- How to add CSS and JS files from Theme
- How to remove CSS and JS files from Theme
Without wasting your time, let us guide you straight away. Follow the easy step given below to Create Plugin in Magento 2.
STEPS FOR ADD / REMOVE CSS AND JS FILE IN MAGENTO 2
- Add CSS/JS on all pages
Step 1: Create default.xml file
app/code/Vendor/Extension/view/frontend/layout/default.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
<head>
<css src=”Vendor_Extension::css/custom.css” />
<script src=”Vendor_Extension::js/custom.js” />
</head>
</page>
- Remove CSS/JS from all pages
Step 1: Create default.xml file
app/code/Vendor/Extension/view/frontend/layout/default.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
<head>
<remove src=”Vendor_Extension::css/custom.css”/>
<remove src=”Vendor_Extension::js/custom.js”/>
</head>
</page>
- Add CSS/JS on specific page
Step 1: Create route_controller_action.xml file
app/code/Vendor/Extension/view/frontend/layout/route_controller_action.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
<head>
<!– Add local files –>
<css src=”Vendor_Extension::css/custom.css” />
<script src=”Vendor_Extension::js/custom.js” />
<!– Add external files –>
<css src=”https://magecurious.com/custom.css” src_type=”url” />
<script src=”https://magecurious.com/custom.js” src_type=”url” />
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap” rel=”stylesheet”>
</head>
</page>
- Remove CSS/JS from specific page
Step 1: Create route_controller_action.xml file
app/code/Vendor/Extension/view/frontend/layout/route_controller_action.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
<head>
<!– Remove local files –>
<remove src=”Vendor_Extension::css/custom.css”/>
<remove src=”Vendor_Extension::js/custom.js”/>
<!– Remove external files –>
<remove src=”https://magecurious.com/custom.css”/>
<remove src=”https://magecurious.com/custom.js”/>
<remove src=”http://fonts.googleapis.com/css?family=Roboto:wght@100″ />
</head>
</page>
- Add CSS/JS on Theme
Step 1: Create default.xml file
app/design/frontend/Vendor/theme/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
<head>
<!– Add local files –>
<css src=”css/custom.css” />
<script src=”js/custom.js” />
<css src=”Vendor_Extension::css/custom.css” />
<script src=”Vendor_Extension::js/custom.js” />
<!– Add external files –>
<css src=”https://magecurious.com/custom.css” src_type=”url” />
<script src=”https://magecurious.com/custom.js” src_type=”url” />
<link rel=”stylesheet” type=”text/css” src=”http://fonts.googleapis.com/css?family=Roboto:wght@100″ src_type=”url” />
</head>
</page>
- Remove CSS/JS on Theme
Step 1: Create default.xml file
app/design/frontend/Vendor/theme/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
<head>
<!– Remove local files –>
<remove src=”css/custom.css” />
<remove src=”js/custom.js”/>
<remove src=”Vendor_Extension::css/custom.css” />
<remove src=”Vendor_Extension::js/custom.js” />
<!– Remove external files –>
<remove src=”https://magecurious.com/custom.css”/>
<remove src=”https://magecurious.com/custom.js”/>
<remove src=”http://fonts.googleapis.com/css?family=Roboto:wght@100″ />
</head>
</page>
Final Thoughts:
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.
So quickly go to the comment box and tell me how you like this blog?
Stay tuned with us on our site to get new updates of Magento.
Thanks for reading and visiting our site.