Adding custom CSS/JS to your Magento 2 modules

September 7, 2015 - Magento 2

There are several options for adding custom CSS/JS to your Magento 2 modules, and the following one is the easiest.

First of all, you should create the view/<area>/layout/default.xml file in your module folder, which can be app/code/Df/Core, for instance.

Don’t forget to replace <area> with adminhtml or frontend.

This is how default.xml should look like:

<?xml version="1.0"?>
<page
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   layout="admin-1column"
   xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"
>
   <head>
       <link src="Df_Core::core.js"/>
       <css src="Df_Core::core.css"/>
   </head>
   <body/>
</page>

<?xml version="1.0"?>

<page

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

layout="admin-1column"

xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"

<head>

</head>

<body/>

</page>

Replace Df_Core with the name of your module and put the core.js и core.css files to the view/<area>/web folder.

Moreover, you can perform the same action with Less files. Create the core.less file instead of core.css and refer it as <css src=”Df_Core::core.css”/> changing the default.xml example above. Thus, the system will compile your less file into css. Hence, you will be able to use Less files in your Magento 2 modules!

More tips from Magento 2 Developer’s Cookbook

Source

Post Tags:custom CSS custom JS magento 2 Magento 2 Developer’s Cookbook magento 2 modules

← Previous Post Next Post →

Related posts