18

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

1
  • regarding Krishna ijjada's answer: I also needed to add registration.php And im not sure if module.xml is required also. Sep 3 '20 at 14:59
36

1 Create a module for example Vendor/Module, this _means a fully working module, including registration.php file etc.

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>
  1. 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

Optional - check css load order:

Note: css file load order might mean that your styles do not take effect, as styles.css gets loaded after these files.

This only works ~Magento 2.3 (tested on Magento 2.3.5).

For example: adding order to 999, ensuring that it _should be one of the last media=all items:

<css src="Vendor_Module::css/test.css order="999" />

For additional information (for instance for older versions) on ordering: See this question

3
  • 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. 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 Nov 5 '18 at 6:17
  • I just need to add one css file and somehow the css is not being added when I see in browser. I need no css except the required one so I am removing the css/styles.css, and doing <referenceContainer name="header" remove="true" /> <referenceContainer name="menu" remove="true" /> <referenceContainer name="logo" remove="true" /> <referenceContainer name="header.container" remove="true" /> <referenceContainer name="footer" remove="true" /> . Any idea what am I missing...?
    – MSQ
    Jan 21 at 12:53
16

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
1
  • 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.