20

How to create Magento 2 custom module with include Css and Js ?

sathya
  • 421
  • 1
  • 4
  • 13

2 Answers2

32

I Hope this is useful for You,

add your css file to

app/code/vendor/module/view/frontend/web/css/mycss.css

mycss.css

 body{
 background-color:green;

}

add your Js file

app/code/vendor/module/view/frontend/web/js/myjs.js

myjs.js:

   require([
    "jquery"
    ], function($){
    $(document).ready(function() {
        alert("Hello");
    });
   });

Reference: http://webkul.com/blog/magento2-how-to-add-css-and-js-file-in-module/ http://www.webspeaks.in/2016/03/how-to-add-css-and-js-in-magento-2-custom-module.html

Then add css and Js File to Your layout File.

app/code/vendor/module/view/frontend/layout/test_index_index.xml

    <?xml version="1.0"?>
     <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
       <head>
          <css src="Vendor_Module::css/mycss.css" />
          <script src="Vendor_Module::js/myjs.js"/>
     </head> 
       <body>
         <referenceContainer name="content">
              <block class="Vendor\Module\Block\class" template="Vendor_Module::class.phtml"/>
         </referenceContainer>  
     </body> 
    </page>

Remove this folder

 rm -rf var/cache/*
 rm -rf var/page_cache/*

Remove pub/static

rm -rf pub/static/*

or

 If throw any error, via remove pub/static in terminal,

Go to <Magento root Dir> via file manager the remove pub/static  directory.


not using terminal to remove pub/static folder.

Next generate Static Content:

bin/magento setup:static-content:deploy

Or

php   bin/magento setup:static-content:deploy

Now, try, Its worked for me.

Victor S.
  • 295
  • 3
  • 14
Rajkumar .E
  • 3,570
  • 7
  • 38
  • 73
  • Thank for your reply Raj. Its worked for me.... – sathya Aug 24 '16 at 05:18
  • 2
    You forgot to put php before bin/magento setup:static-content:deploy

    So, last command is: php bin/magento setup:static-content:deploy

     – WaPoNe Dec 01 '16 at 15:11
  • @WaPoNe I use bin/magento setup:static-content:deploy its is also works , i think windows only use php bin/magento setup:static-content:deploy – Rajkumar .E Dec 01 '16 at 15:23
  • 6
    @Rajkumar.E when you try to call your css/js, you have to specify the vendorName_moduleName also before css/js name: <css src="vendorName_moduleName::css/mycss.css" /> and <script src="vendorName_moduleName::js/myjs.js"/> – WaPoNe Dec 01 '16 at 15:59
  • 3
    A word of warning. When running rm -rf pub/static for apache users, your pub/static/.htaccess file may be removed causing console logs about missing files. – Dave Jan 19 '17 at 01:49
  • @Cumbo i update my answers, i did lot of time to remove pub/static using rm -rf pub/static , if got issue while remove using rm -rf pub/static command , try to remove vis file manager not using terminal. – Rajkumar .E Jan 19 '17 at 04:44
  • Do i have to run these commands every time i make a change in the js and css files? – Jiyaad.D Sep 12 '17 at 07:12
  • Please use RequireJs to include script. As well as css tag should be <css src="Module_Name::css/mycss.css"/> – crashtestxxx Nov 30 '19 at 03:42
  • Mind as well block: <block class="Vendor\Module\Block\class" name="some-name" template="Vendor_Module::class.phtml"/> – crashtestxxx Nov 30 '19 at 03:47
8

Try this

Create the view/<area>/layout/default.xml file in your module folder, which can be app/code/Df/Core, for instance.

Replace <area> with adminhtml or frontend

default.xml should look like:

<?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>
       <link src="Df_Core::core.js"/>
       <css src="Df_Core::core.css"/>
   </head>
   <body>
   <body/>
</page>

put the core.js and core.css files to the view/<area>/web folder.
Hackinet
  • 113
  • 4
Ravindra
  • 91
  • 2