I have integrated metronic 028 into my laravel project, all default build.
My select2 works like the one below. The CSS doesn't work properly.
<img src="https://prnt.sc/Sox5oRACe5HY"></img
1) Most of the files above are referred to the node_modules folder.
2) This is the alias path. It refers to the src folder in the demo.
require("@/src/...);
window.FormValidation = require("@/src/plugins/formvalidation/dist/js/FormValidation.full.min.js");
/metronic_v8.1.6/html/demo1/src/plugins/formvalidation/dist/js/FormValidation.full.min.js
You can refer to the existing Metronic Laravel for these 2 files. The select2 plugin is imported at these files;
resources/assets/core/plugins/plugins.js
resources/assets/core/plugins/plugins.scss
I integrated metronic into my existing laravel project using the metronic HTML version. There are a lot of files that can't be located. Could you please help?
//
// 3rd-Party Plugins JavaScript Includes
//
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
//// Mandatory Plugins Includes(do not remove or change order!) ////
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
// Jquery - jQuery is a popular and feature-rich JavaScript library. Learn more: https://jquery.com/
window.jQuery = window.$ = require("jquery");
// Bootstrap - The most popular framework uses as the foundation. Learn more: http://getbootstrap.com
window.bootstrap = require("bootstrap");
// Popper.js - Tooltip & Popover Positioning Engine used by Bootstrap. Learn more: https://popper.js.org
window.Popper = require("@popperjs/core");
// Wnumb - Number & Money formatting. Learn more: https://refreshless.com/wnumb/
window.wNumb = require("wnumb");
// Moment - Parse, validate, manipulate, and display dates and times in JavaScript. Learn more: https://momentjs.com/
window.moment = require("moment");
// ES6-Shim - ECMAScript 6 compatibility shims for legacy JS engines. Learn more: https://github.com/paulmillr/es6-shim
require("es6-shim/es6-shim.min.js");
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
/// Optional Plugins Includes(you can remove or add) ///////////////
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
// Apexcharts - mBdern charting library that helps developers to create beautiful and interactive visualizations for web pages: https://apexcharts.com/
window.ApexCharts = require("apexcharts/dist/apexcharts.min.js");
// FormValidation - Best premium validation library for JavaScript. Zero dependencies. Learn more: https://formvalidation.io/
window.FormValidation = require("@/src/plugins/formvalidation/dist/js/FormValidation.full.min.js");
window.FormValidation.plugins.Bootstrap5 = require("@/src/plugins/formvalidation/dist/amd/plugins/Bootstrap5.js").default;
// Date Range Picker - A JavaScript component for choosing date ranges, dates and times: https://www.daterangepicker.com/
require("bootstrap-daterangepicker/daterangepicker.js");
// Bootstrap Maxlength - This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text: https://github.com/mimo84/bootstrap-maxlength
require("bootstrap-maxlength/src/bootstrap-maxlength.js");
require("@/src/plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js");
// Select2 - Select2 is a jQuery based replacement for select boxes: https://select2.org/
require("~select2/dist/js/select2.full.js");
require("../../../../resources/src/js/vendors/plugins/select2.init.js");
// Flatpickr - is a lightweight and powerful datetime picker.
require("flatpickr/dist/flatpickr.min.js");
require("@/src/js/vendors/plugins/flatpickr.init.js");
// Inputmask - is a javascript library which creates an input mask: https://github.com/RobinHerbots/Inputmask
require("inputmask/dist/inputmask.js");
require("inputmask/dist/bindings/inputmask.binding.js");
// noUiSlider - is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies: https://refreshless.com/nouislider/
window.noUiSlider = require("nouislider/dist/nouislider.min.js");
// The autosize - function accepts a single textarea element, or an array or array-like object (such as a NodeList or jQuery collection) of textarea elements: https://www.jacklmoore.com/autosize/
window.autosize = require("autosize/dist/autosize.min.js");
// Clipboard - Copy text to the clipboard shouldn"t be hard. It shouldn"t require dozens of steps to configure or hundreds of KBs to load: https://clipboardjs.com/
window.ClipboardJS = require("clipboard/dist/clipboard.min.js");
// DropzoneJS - is an open source library that provides drag"n"drop file uploads with image previews: https://www.dropzonejs.com/
window.Dropzone = require("dropzone/dist/min/dropzone.min.js").default;
require("@/src/js/vendors/plugins/dropzone.init.js");
// Quill - is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API: https://quilljs.com/
window.Quill = require("quill/dist/quill.js");
// Tagify - Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and small code footprint, exploded with features: https://github.com/yairEO/tagify
require("@yaireo/tagify/dist/tagify.polyfills.min.js");
window.Tagify = require("@yaireo/tagify/dist/tagify.min.js");
// Toastr - is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended: https://github.com/CodeSeven/toastr
window.toastr = require("@/src/plugins/toastr/build/toastr.min.js");
// Bootstrap Session Timeout - Session timeout and keep-alive control with a nice Bootstrap warning dialog: https://github.com/orangehill/bootstrap-session-timeout
window.sessionTimeout = require("@/src/plugins/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js");
// JQuery Idletimer - provides you a way to monitor user activity with a page: https://github.com/thorst/jquery-idletimer
require("@/src/plugins/jquery-idletimer/idle-timer.min.js");
// ES6 Promise Polyfill - This is a polyfill of the ES6 Promise: https://github.com/lahmatiy/es6-promise-polyfill
require("es6-promise-polyfill/promise.min.js");
// Sweetalert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript"s popup boxes: https://sweetalert2.github.io/
window.Swal = window.swal = require("sweetalert2/dist/sweetalert2.min.js");
require("@/src/js/vendors/plugins/sweetalert2.init.js");
// CountUp.js - is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
window.countUp = require("countup.js/dist/countUp.withPolyfill.min.js");
// Chart.js - Simple yet flexible JavaScript charting for designers & developers
window.Chart = require("chart.js/dist/chart.js");
// Tiny slider - for all purposes, inspired by Owl Carousel.
window.tns = require("tiny-slider/src/tiny-slider.js").tns;
// A lightweight script to animate scrolling to anchor links
window.SmoothScroll = require("smooth-scroll/dist/smooth-scroll.js");
Do you integrate the HTML version into your own existing Laravel project?
Have you imported these JS and SCSS files for select2?
JS
"node_modules/select2/dist/js/select2.full.js",
"resources/assets/core/js/vendors/plugins/select2.init.js",
@import "~select2/src/scss/core.scss";
Yes. HTML version.
And how and where to integrate them. Please explain.
Same here. I build the CSS and JS with gulp but i still cant use select2. Help!
What about select2?
Hi Istiyak Sheyam,
Sorry for the delay. Could you please try to change tagify in package.json
to
"@yaireo/tagify": "4.16.4",
yarn.lock
file, then retry.I solved these problems using @import and added the mapping and variable files. But still, select2 has the same issue. A lot of built-in js functionalities are working.
I need the solution ASAP.
I got those issue while building assets
ERROR in ./resources/src/sass/plugins.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
â·
48 â @include placeholder($input-placeholder-color);
â ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
âµ
resources/src/sass/vendors/plugins/_select2.scss 48:4 @import
resources/src/sass/vendors/plugins/_plugins.scss 8:9 @import
resources/src/sass/plugins.scss 16:9 root stylesheet
at processResult (app/node_modules/webpack/lib/NormalModule.js:758:19)
at app/node_modules/webpack/lib/NormalModule.js:860:5
at app/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at app/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (app/node_modules/sass-loader/dist/index.js:69:5)
ERROR in ./resources/src/sass/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
â·
55 â @include svg-icon-size(24px);
â ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
âµ
resources/src/sass/components/_card.scss 55:21 @import
resources/src/sass/components/components.scss 54:9 @import
resources/src/sass/style.scss 12:9 root stylesheet
at processResult (app/node_modules/webpack/lib/NormalModule.js:758:19)
at app/node_modules/webpack/lib/NormalModule.js:860:5
at app/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at app/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (app/node_modules/sass-loader/dist/index.js:69:5)
2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 4 errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Also in my project tagify doesn't work.
screenshot
https://prnt.sc/Sox5oRACe5HY