By default, you will get all the third-party plugins that we are using will be included in package. Now, you can add your custom third-party plugin or remove unwanted plugins to reduce bundle size and compile time.
To add new third-party plugin, follow this steps :
libs
directory to include
plugin css & jsscss/_theme/_libs.scss
file.
For example, if you want to include bootstrap-select plugin, you need to follow this:
npm i bootstrap-select
.bootstrap-select
directory within the libs
directory & create plugin
related files like :
bootstrap-select.js
&
bootstrap-select.scss
bootstrap-select.scss
. Refer template support for mixins details.
import 'bootstrap-select/js/bootstrap-select';
@import "bootstrap-select/sass/bootstrap-select.scss";
// include scss that you want to overwrite
// Light style
@if $enable-light-style {
.light-style {
@import '../../css/_bootstrap-extended/include';
.bootstrap-select {
...
}
}
}
// Dark Style
@if $enable-dark-style {
.dark-style {
@import '../../css/_bootstrap-extended/include-dark';
.bootstrap-select {
...
}
}
}
//LTR Style
@include app-ltr(false) {
.bootstrap-select{
...
}
}
//RTL Style
@include app-rtl(false) {
.bootstrap-select{
...
}
}
@import "../../css/_bootstrap-extended/functions";
<!-- Add mixins that you need for this plugin -->
@mixin bs-select-theme($background, $color: null) {
$color: if($color, $color, yiq($background));
.bootstrap-select .dropdown-menu.inner a[aria-selected="true"] {
background: $background !important;
color: $color !important;
}
}
scss/_theme/_libs.scss
file.
@import "../../libs/bootstrap-select/mixins";
@mixin template-libs-theme($background, $color: null) {
@include bs-select-theme($background, $color);
}
// Include stylesheet
<link rel="stylesheet" href="vendor/libs/bootstrap-select/bootstrap-select.css" />
// Include Javascript
<script src="vendor/libs/bootstrap-select/bootstrap-select.js"></script>
// Include page specific Javascript
<script src="js/page.js"></script>
// Include HTML
<select class="selectpicker w-100" data-style="btn-default">
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
// To style only selects with the selectpicker class
$('.selectpicker').selectpicker();
For example, if you want to include bootstrap-select
plugin, you need to follow this:
bootstrap-select
plugin's CSS & JS filebootstrap-select.js
& bootstrap-select.css
files inside a folder For example,
bootstrap-select at dev/assets/vendors/libs/
.
Check plugin options and configurations that you want to use and You're done!
You can remove unwanted third-party plugins to reduce bundle size and execution time :
npm uninstall <module_name> --save
to remove module from dependencies in
package.json
package.json
file.
libs
directory.scss/_theme/_libs.scss
file.For example, if you want to remove bootstrap-select plugin, you need to follow this:
npm uninstall bootstrap-select --save
.package.json
file.libs/bootstrap-select
directory.@import "../../libs/bootstrap-select/mixins";
and included
template-libs-theme
mixin from scss/_theme/_libs.scss
file.
assets/vendors/libs
directory.For example, if you want to remove bootstrap-select plugin, you need to follow this:
assets/vendors/libs
directory.