Adding your own CSS or JS to every or specific page can also be done through a layout XML file. The source of a file that you want to include can come from the following:
- An external source hosted remotely
- Module-specific, which is mainly used by JavaScript
- Theme-specific, which is mainly used when adding CSS but can also be used to add custom JavaScript
In order to include CSS or JavaScript to a page, you first need to know where you want to include your files and where the file is located that you want to include. In this recipe, we will see how to include both an external CSS and JavaScript file and a theme JavaScript and CSS file.
This recipe is based on the theme created in the Creating a new theme recipe of this chapter.
- To add a new source (CSS or JS) to all pages, the configuration is done through the
default_head_blocks.xmlfile. It is also possible to add it to a single page only through the layout file for that layout handle:app/design/frontend/Genmato/default/Magento_Theme/layout/default_head_blocks.xml<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <link src='https://fonts.googleapis.com/css?family=Open+Sans' type='text/css' src_type="url"/> <link src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js' src_type="url"/> <link src="js/sample.js"/> <css src="css/sample.css" /> </head> </page> - Add the custom JavaScript code (just the basic file here):
app/design/frontend/Genmato/default/web/js/sample.jsrequire([ 'jquery', ], function ($) { jQuery(document).ready(function () { // You jQuery code here }); }); - Add your custom stylesheet Less file:
app/design/frontend/Genmato/default/web/css/sample.lessyou can add your own Less code here!
- Upload the file to your Magento 2 installation and refresh the cache:
bin/magento cache:clean
- Next, generate the static content:
bin/magento setup:static-content:deploy
Make sure that you remove your theme-generated files from the following locations:
pub/static/frontend/<Theme Vendor>var/view_preprocessed/css/frontend/<Theme Vendor>Otherwise, the changes in the Less files in your theme will not be used as the preprocessor checks if there is already a generated CSS file available.
Refresh the page and make sure that the new CSS and JS files are added to the header of the source of your page.
During the generation process, the XML tags that are added to the head component are converted depending on what is supplied in the configuration.
When adding files from an external source, you need to specify src_type=url. Otherwise, the supplied source will be converted into a file on the local filesystem and result in an error loading the resource.
Magento 2 uses RequireJS to manage all JavaScript and its dependencies; this means that it's not possible to just include an extra JS file and use functions that are available with jQuery. In order to use calls to jQuery functions, you need to add this dependency in your JS file; this will make sure that the jQuery library is loaded before your code is executed.
When including a CSS file, the CSS is generated from a Less file, which is done automatically by the Magento preprocessor when the specified CSS isn't found and there is a .less file found with the same name.
It is also possible to remove a file from the header; this can be useful if you want to remove an included resource from a parent theme. To remove a CSS, JavaScript, or font from the header, you can use the <remove> tag where you reference the path that you want to remove. For example, to remove the styles-l.css file from the page, you can use the following:
<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 src="css/styles-l.css"/>
</head>
</page>