How to Add/Remove CSS and JS file in Magento 2 • Dev Hooks • devhooks.in

In this article we'll learn how to add or remove CSS, JS, and Font in Magento 2. We're also give you an exmaple to add external CSS, JS, and Font file on all or specific page in Magento 2.

Below are the points we'll see in this article.

How to add CSS and JS file on all pages in Magento 2.
How to remove CSS and JS file on all pages in Magento 2.
How to add CSS and JS file on specific page in Magento 2.
How to remove CSS and JS file on specific page in Magento 2.
How to Add/Remove CSS and JS files from Theme in Magento 2.

Add CSS/JS file on all pages in Magento 2.

If you want to add CSS and JS files on all pages then you need to create a default.xml file at Devhooks/HelloWorld/view/frontend/layout/default.xml and the code as per below reference.

saveCopyzoom_out_map<?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="Devhooks_HelloWorld::css/custom.css" />
        <script src="Devhooks_HelloWorld::js/custom.js" />
    </head>
</page>

Remove CSS/JS file on all pages in Magento 2.

If you want to remove CSS and JS files on all pages then you need to create a default.xml file at Devhooks/HelloWorld/view/frontend/layout/default.xml and the code as per below reference.

Devhooks/HelloWorld/view/frontend/layout/default.xml

saveCopyzoom_out_map<?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="Devhooks_HelloWorld::css/custom.css"/>
        <remove src="Devhooks_HelloWorld::js/custom.js"/>
    </head>
</page>

Add CSS/JS file on specific page in Magento 2.

If you want to add CSS and JS files on specific pages then you need to create a route_controller_action.xml file at Devhooks/HelloWorld/view/frontend/layout/route_controller_action.xml or you can add this code on your existing file and add the code as per below reference.

Devhooks/HelloWorld/view/frontend/layout/route_controller_action.xml

saveCopyzoom_out_map<?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="Devhooks_HelloWorld::css/custom.css" />
	<script src="Devhooks_HelloWorld::js/custom.js" />

	<!-- Add external files -->
	<css src="https://domain.com/custom.css" src_type="url" />
	<script src="https://domain.com/custom.js" src_type="url" />
	<link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
    </head>
</page>

Remove CSS/JS file on specific page in Magento 2.

If you want to remove CSS and JS files on specific pages then you need to create a route_controller_action.xml file at Devhooks/HelloWorld/view/frontend/layout/route_controller_action.xml or you can add this code on your existing file and add the code as per below reference.

saveCopyzoom_out_map<?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="Devhooks_HelloWorld::css/custom.css"/>
	<remove src="Devhooks_HelloWorld::js/custom.js"/>

	<!-- Remove external files -->
	<remove src="https://domain.com/custom.css"/>
	<remove src="https://domain.com/custom.js"/>
	<remove src="http://fonts.googleapis.com/css?family=YourFontFamily" />
    </head>
</page>

Add/Remove files from Theme.

To add/remove CSS and JS file from the theme you need create one file at app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml location and add the files like below reference code.

saveCopyzoom_out_map<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="Devhooks_HelloWorld::css/custom.css" />
	<script src="Devhooks_HelloWorld::js/custom.js" />

	<!-- Add external files -->
	<css src="https://domain.com/custom.css" src_type="url" />
	<script src="https://domain.com/custom.js" src_type="url" />
	<link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=YourFontFamily" src_type="url" />

	<!-- Remove local files -->
	<remove src="css/custom.css" />
	<remove src="js/custom.js"/>
	<remove src="Devhooks_HelloWorld::css/custom.css" />
	<remove src="Devhooks_HelloWorld::js/custom.js" />

	<!-- Remove external files -->
	<remove src="https://domain.com/custom.css"/>
	<remove src="https://domain.com/custom.js"/>
	<remove src="http://fonts.googleapis.com/css?family=YourFontFamily" />
   </head>
</page>

That's it!!

I hope this article helped you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions on that.

P.S. Do share this article with your team.