Magento 2: How to add CSS and js File in Module
Here we’ll learn how to add CSS and js file in Magento 2 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
- 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 namednamed grid.js in app/code/Webkul/Grid/view/frontend/web/js
require([
'jquery',
'domReady!'
], function ($) {
'use strict';
/* for check in this file we only add jquery code that display(in console) class of element which selector used */
console.log($('#my-orders-table').attr('class'));
});
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="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<!-- for add css and js file on page -->
<head>
<!-- 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 -->
</head>
<body>
<referenceContainer name="content">
<block class="Webkul\Grid\Block\Index" name="Grid" template="Webkul_Grid::grid/success.phtml">
</block>
</referenceContainer>
</body>
</page>
Note: in next post i will explain how to use ‘less’ for style in magento 2
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
