Adding custom CSS/JS to your Magento 2 modules

- Magento 2

Magento 2 Development

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:

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