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:
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.
default_head_blocks.xml
file. 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>
app/design/frontend/Genmato/default/web/js/sample.js
require([ 'jquery', ], function ($) { jQuery(document).ready(function () { // You jQuery code here }); });
app/design/frontend/Genmato/default/web/css/sample.less
you can add your own Less code here!
bin/magento cache:clean
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>
3.139.240.244