Back to Top

Magento2: How to add css and js file in module

Updated 22 February 2024

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

Searching for an experienced
Magento 2 Company ?
Find out More

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

#my-orders-table{border:2px solid #FF0000;color:#FF0000;}

/** Here i add style on table id for understand  **/
/** Magento2 support 'less'  in next post i'll explain how to use less in magento2 module **/
/** here we add normal css file in magento2 **/

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

], function ($) {
    'use strict';
   /* for check in this file we only add jquery code that display(in console) class of element which selector used */

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

<page xmlns:xsi="" layout="2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<!-- for add css and js file on page -->
       <!-- for css file -->
       <css src="Webkul_Grid::css/grid.css"/>

       <!-- for js file -->
       <script src="Webkul_Grid::js/grid.js"/>
       <!-- src="Webkul_Grid::js/grid.js" that mean from here get file -->
       <!-- Webkul_Grid is module name, js/grid.js and css/grid.css are location of files in web folder of module  -->
    <referenceContainer name="content">
        <block class="Webkul\Grid\Block\Index" name="Grid" template="Webkul_Grid::grid/success.phtml">

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


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


  • Rafael Corrêa Gomes ♛
  • Andrii Kasian
    • webkul
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home