How to Add/Remove Static Files JS, CSS, Fonts in Magento 2
Vinh Jacker | 12-18-2024
In today’s article, I will guide you on how to add and remove static files including JS, CSS and Fonts in Magento 2.
With this easy-to-understand tutorial, it will be easy to add or remove Static Files JS, CSS, Fonts.
Let’s start now!
Add Static Files
Commonly, if you want to use external libraries to customzie pages in Magento 2, you need to add JavaScript and CSS files. JavaScript, CSS, and other static files will be added to the <head> section of the page configuration file.
In a page configuration file, the <head> section includes various static resources such as JavaScript, CSS. The file app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml defines the original look of the <head> section in a Magento store page.
To add CSS and JavaScript, you are recommended to extend the file in your custom theme, and then add the files there.
Below is a sample of a file that have to be added:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Add local resources -->
<css src="css/my-styles.css"/>
<!-- The following two ways to add local JavaScript files are equal -->
<script src="Magento_Catalog::js/sample1.js"/>
<link src="js/sample.js"/>
<!-- Add external resources -->
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
<link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
</head>
</page>
When external resources are added, you have to specify the src_type="url" argument value.
Either the <link src="js/sample.js"/> or <script src="js/sample.js"/> instruction can be used to add a locally stored JavaScript file to your theme.
One of the following locations relatively specifies the path to assets:
<theme_dir>/web-<theme_dir>/<Namespace>_<Module>/web-
Add conditional comments
Conditional comments are used to provide special instructions for Internet Explorer. In the terms of adding files, CSS files can be added for you to be included for an Internet Explorer’s specific version.
Here is an example:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/ie-9.css" ie_condition="IE 9" />
</head>
</page>
Here, an IE conditional comment is added in the generated HTML, please view the below example:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="<your_store_web_address>/pub/static/frontend/OrangeCo/orange/en_US/css/ie-9.css" />
<![endif]-->
In the above example, orange is the custom theme that is created by the OrangeCo vendor.
Remove Static Files
For the static assets which is linked in a page <head> to be removed, you can make a change in a theme extending app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml like the following:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Remove local resources -->
<remove src="css/styles-m.css" />
<remove src="my-js.js"/>
<remove src="Magento_Catalog::js/compare.js" />
<!-- Remove external resources -->
<remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
<remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
<remove src="http://fonts.googleapis.com/css?family=Montserrat" />
</head>
</page>
You need to remember that the module path need to be specify if you add or remove a static asset with a module path in the initial layout, for example Magento_Catalog::js/sample.js.
Conclusion
Above are the simple solution to help you add and remove static files in Magento 2. I hope it is helpful for you. If you have any questions or new ideas, feel free to leave a comment below.
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Related Post
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started