Menu Close
    Hire us Request quote Reading list Switch to dark mode

    Magento2: How to add css and js file in module

    Here we’ll learn how to add css and js file in magento2 module .
    Magento2: How to add css and js file in module
    In blog post Magento2: Create list with pager in frontend  we learned that how to create controller, page layout file, templates file, block files  etc.

    so we have already module named “Webkul_Grid”,  in this module we add css and js file and for this we need to create following directory structure

    in this module

    app/code/Webkul/Grid/view/frontend/web/css (contain css file )
    app/code/Webkul/Grid/view/frontend/web/js (contain js file )

    css and js file add  to page by  layout xml

    1.First we create css file which we want to add in our page named grid.css in app/code/Webkul/Grid/view/frontend/web/css folder

    2. Now, we will create js  file which we want to add in our page named named grid.js in app/code/Webkul/Grid/view/frontend/web/js

    3.First, we will open frontend page layout  file in which we want to add css and js. In our ‘Webkul_Grid’ module we want to add css and js in gird list page so we open this page layout file named grid_index_index.xml in app/code/Webkul/Grid/view/frontend/layout


    Note: in next post i will explain how to use ‘less’ for style in magento2

    4. Now, on  our frontend  page css and js file added and effect of css and js apply on  page and output is as following

     

    . . .

    Comments (3)

    Add Your Comment

  • Rafael Corrêa Gomes ♛
    Thank’s!
  • Andrii Kasian
    Currently layout javascript declaration is not recommended. Please use RequireJs to include script and proper dependencies management.
    • webkul
      Yes Thats correct . Thanks for the info
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just received your message and our expert will get back to you shortly.
    Send Again
    Close