How to Add/Remove Static Files JS, CSS, Fonts in Magento 2

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.

Previous Add Meta Tags to Header
Next How to Extend Layout
One Step Checkout for Magento 2 by Mageplaza
x