16

I need to add CSS file for Admin side in my custom module. How can I add this for Admin (back-end) only ?

27

1 Create a module for example Vendor/Module

2 Create a new file view/adminhtml/layout/default.xml in the module

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
     <css src="Vendor_Module::css/test.css"/>
   </head>
</page>

3) Add .css file in web folder as below path:

view/adminhtml/web/css/test.css

Run below commands and check.

php bin/magento cache:clean

php bin/magento setup:static-content:deploy

  • 1
    Hello, I am trying to add <css src="Magento_Catalog::catalog/category-selector.css"/> in my custom module, but it is showing 404 error in console. – Vinaya Maheshwari Jul 12 '17 at 12:34
  • in this example, Vendor_Module is the applied theme name only or we can take out new module also ? @Krishna ijjada – SagarPPanchal Nov 5 '18 at 6:17
11

Magento 2 uses less file so you can also use less type as follows below step.

Create new file at Vendor/Module/view/adminhtml/web/css/source/_module.less

after that run below command from root directory and check

rm -rf var/view_preprocessed/
rm -rf pub/static/adminhtml
php bin/magento setup:static-content:deploy
  • I need to add .less file to use less variables like @icon-help__content; I want this less file to be loaded after the other files are loaded what is the proper way to do this. – AbdulBasit Oct 24 '17 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.