How to Add or Remove CSS/JS Files in Magento 2 • Devhooks

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.

How to Add/Remove CSS and JS file in Magento 2

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

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

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

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

Add/Remove files from Theme.

AI-Powered Recommended Articles

Easiest Way to Override Component and Files in Magento 2 PWA Studio

Useful Commands list for Magento 2

How to add custom link on top navigation menu in Magento 2

Magento 2 Add Custom Tab On Customer Account Section

How to Call CMS Block Using Layout XML in Magento 2

How To Create a Magento 2 Module

Related Keywords