.png "How To Add Custom Css and js library in Magento 2")
Hello friends, I am going to share How To Add Custom Css and js library in Magento 2 , my best megento practice with you guys through this post. And I hope that through this post you will get a lot of help in customizing the megento ecomm platform.
Here My Vendor_Name : Mageget
Here My Module_Name : CustomerImage
1) Create a module.xml file in \app\code\Mageget\CategoryAttribute\etc\module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Mageget_CustomerImage" setup_version="1.0.1">
</module>
</config>
2) Create a registration.php file in \app\code\Mageget\CategoryAttribute\registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Mageget_CustomerImage',
__DIR__
);
3) Put file inside js folder in \app\code\Mageget\CustomerImage\view\frontend\web\js\your_library_js_name.js
Here my js library is : croppie.js
\app\code\Mageget\CustomerImage\view\frontend\web\js\croppie.js
4) Map here your js library in requirejs-config.js
\app\code\Mageget\CustomerImage\view\frontend\requirejs-config.js
var config = {
map: {
'*': {
croppie:'Mageget_CustomerImage/js/croppie'
}
}
};
5) Load your js library in your custom js file : our custom js file name is coppiimage.js
\app\code\Mageget\CustomerImage\view\frontend\web\js\coppiimage.js
require(['jquery','croppie'], function($,croppie) {
alert('jQuery and croppie js library is loaded');
});
6) P ut your css file in web\css\source\ folder
\app\code\Mageget\CustomerImage\view\frontend\web\css\source\croppie.min.css
and rename your filename extension coppiimage.css = croppie.min.less (less file )
\app\code\Mageget\CustomerImage\view\frontend\web\css\source\coppiimage.less
7) Create a custom file i'm create cdeep.less // as your choice
\app\code\Mageget\CustomerImage\view\frontend\web\css\source\cdeep.less
8) and load your css file in cdeep.less
@import 'croppie.min.less';
9 ) And call the file in default.xml
\app\code\Mageget\CustomerImage\view\frontend\layout\default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Mageget_CustomerImage::css/source/cdeep.css"/> <!-- // css library -->
<css src="Mageget_CustomerImage::css//customdeep.css"/> <!-- // custom css -->
<script src="Mageget_CustomerImage::js/coppiimage.js"/> <!-- // custom js -->
</head>
</page>