Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Add bootstrap colors


Hi,

I would like to import green-* colors by bootstrap at below:
https://getbootstrap.com/docs/5.2/customize/color/#generating-utilities

However, after adding above in "_variables.custom.scss", it got below errors when complie (using webpack):

[root@crm tools]# npm run build --demo1

> metronic@8.1.5 build
> webpack

>> Building metronic bundle...
>> Failed to compile metronic bundle!

ModuleBuildError: 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: 1em and 0.5rem have incompatible units.
â•·
713 │ $form-check-padding-left: $form-check-input-width + .5rem !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../demo1/src/sass/components/_variables.scss 713:45 @import
../demo1/src/sass/_init.scss 14:9 @import
../demo1/src/sass/plugins.scss 10:9 root stylesheet
ERROR in ../demo1/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: 1em and 0.5rem have incompatible units.
â•·
713 │ $form-check-padding-left: $form-check-input-width + .5rem !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../demo1/src/sass/components/_variables.scss 713:45 @import
../demo1/src/sass/_init.scss 14:9 @import
../demo1/src/sass/plugins.scss 10:9 root stylesheet
at processResult (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/webpack/lib/NormalModule.js:758:19)
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/webpack/lib/NormalModule.js:860:5
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass-loader/dist/index.js:62:7
at Function.call$2 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:101257:16)
at render_closure1.call$2 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:86329:12)
at _RootZone.runBinary$3$3 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:30053:18)
at _FutureListener.handleError$1 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:28582:21)

ERROR in ../demo1/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: 1em and 0.5rem have incompatible units.
â•·
713 │ $form-check-padding-left: $form-check-input-width + .5rem !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../demo1/src/sass/components/_variables.scss 713:45 @import
../demo1/src/sass/_init.scss 14:9 @import
../demo1/src/sass/style.scss 6:9 root stylesheet
at processResult (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/webpack/lib/NormalModule.js:758:19)
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/webpack/lib/NormalModule.js:860:5
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass-loader/dist/index.js:62:7
at Function.call$2 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:101257:16)
at render_closure1.call$2 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:86329:12)
at _RootZone.runBinary$3$3 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:30053:18)
at _FutureListener.handleError$1 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:28582:21)

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 4 errors
[root@crm tools]#


Can help check how to do so?

Thanks.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Hi,

ok now, thanks for helping



Glad it works happy
Let us know if you need any help.

Thanks



Hi Peter Chan,

Could you please try to add it to this file instead?
/metronic_v8.1.5/html/demo1/src/sass/layout/_variables.custom.scss

Not in this file;
/metronic_v8.1.5/html/demo1/src/sass/components/_variables.custom.scss

Thanks



What are the commands for doing this in vue demo? Thank you!



Hi,

Tried to remove node_modules and build again, but error occurs:


[root@crm tools]# rm -rf node_modules/
[root@crm tools]# yarn
yarn install v1.22.19
[1/4] Resolving packages...
warning npm > node-gyp > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning npm > node-gyp > request > har-validator@5.1.5: this library is no longer supported
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > @yaireo/tagify@4.16.4" has unmet peer dependency "prop-types@^15.7.2".
warning " > bootstrap@5.2.2" has incorrect peer dependency "@popperjs/core@^2.11.6".
warning "bootstrap-maxlength > bootstrap@4.6.2" has unmet peer dependency "popper.js@^1.16.1".
warning " > vis-timeline@7.7.0" has unmet peer dependency "@egjs/hammerjs@^2.0.0".
warning " > vis-timeline@7.7.0" has unmet peer dependency "component-emitter@^1.3.0".
warning " > vis-timeline@7.7.0" has unmet peer dependency "keycharm@^0.3.0 || ^0.4.0".
warning " > vis-timeline@7.7.0" has unmet peer dependency "propagating-hammerjs@^1.4.0 || ^2.0.0".
warning " > vis-timeline@7.7.0" has unmet peer dependency "uuid@^3.4.0 || ^7.0.0 || ^8.0.0".
warning " > vis-timeline@7.7.0" has unmet peer dependency "vis-data@^6.3.0 || ^7.0.0".
warning " > vis-timeline@7.7.0" has unmet peer dependency "vis-util@^3.0.0 || ^4.0.0 || ^5.0.0".
warning " > vis-timeline@7.7.0" has unmet peer dependency "xss@^1.0.0".
warning " > postcss-loader@4.3.0" has unmet peer dependency "postcss@^7.0.0 || ^8.0.1".
warning Workspaces can only be enabled in private projects.
[4/4] Building fresh packages...
success Saved lockfile.
Done in 120.31s.
[root@crm tools]# npm run build --demo1

> metronic@8.1.5 build
> webpack

>> Building metronic bundle...
>> Failed to compile metronic bundle!

ModuleBuildError: 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 variable.
&acirc;&#149;&middot;
7 &acirc;&#148;&#130; $all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
&acirc;&#148;&#130; ^^^^^^
&acirc;&#149;&micro;
../demo1/src/sass/components/_variables.custom.scss 7:33 @import
../demo1/src/sass/_init.scss 13:9 @import
../demo1/src/sass/plugins.scss 10:9 root stylesheet
ERROR in ../demo1/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 variable.
&acirc;&#149;&middot;
7 &acirc;&#148;&#130; $all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
&acirc;&#148;&#130; ^^^^^^
&acirc;&#149;&micro;
../demo1/src/sass/components/_variables.custom.scss 7:33 @import
../demo1/src/sass/_init.scss 13:9 @import
../demo1/src/sass/plugins.scss 10:9 root stylesheet
at processResult (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/webpack/lib/NormalModule.js:758:19)
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/webpack/lib/NormalModule.js:860:5
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass-loader/dist/index.js:62:7
at Function.call$2 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:101257:16)
at render_closure1.call$2 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:86329:12)
at _RootZone.runBinary$3$3 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:30053:18)
at _FutureListener.handleError$1 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:28582:21)

ERROR in ../demo1/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 variable.
&acirc;&#149;&middot;
7 &acirc;&#148;&#130; $all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
&acirc;&#148;&#130; ^^^^^^
&acirc;&#149;&micro;
../demo1/src/sass/components/_variables.custom.scss 7:33 @import
../demo1/src/sass/_init.scss 13:9 @import
../demo1/src/sass/style.scss 6:9 root stylesheet
at processResult (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/webpack/lib/NormalModule.js:758:19)
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/webpack/lib/NormalModule.js:860:5
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass-loader/dist/index.js:62:7
at Function.call$2 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:101257:16)
at render_closure1.call$2 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:86329:12)
at _RootZone.runBinary$3$3 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:30053:18)
at _FutureListener.handleError$1 (/var/www/virtual/crm-dev2.clickcola.com/webroot/js/metronic/tools/node_modules/sass/sass.dart.js:28582:21)

2 ERRORS in child compilations (Use "stats.children: true" resp. "--stats-children" for more details)
webpack compiled with 4 errors
[root@crm tools]#


My _variables.custom.scss:

// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss are not accessible in this file but you can override any global variable as shown below:



$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);


// Theme colors
// Primary
$primary: #5463A5;
$primary-active: #5463A5;
$primary-light: #F1FAFF;
$primary-inverse: #FFFFFF;

// Light
$light: #F5F5F5;

// gray
$gray-200: #e9ecef;
$gray-300: #dee2e6;

// Secondary
$secondary: #979EBD;

// Success
$success: #0BB783;
$success-active: #0BB783;
$success-light: #D7F9EF;
$success-inverse: #FFFFFF;

// Info
$info: #00ABE6;
$info-active: #00ABE6;
$info-light: #F8F5FF;
$info-inverse: #FFFFFF;

// Danger
$danger: #F0762F;
$danger-active: #F0762F;
$danger-light: #FFF5F8;
$danger-inverse: #FFFFFF;

// Warning
$warning: #FCB813;
$warning-active: #FCB813;
$warning-light: #FFF8DD;
$warning-inverse: #FFFFFF;

// Dark
$dark: #3F4254;

// modal
$modal-backdrop-opacity: .3;

$aside-config: (
z-index: 101, // Aside z-index property
transition-speed: 0.3s, // transition speed
padding-x: 25px,
menu-indention: 0.75rem,
bg-color: #1e1e2d,
logo-bg-color: darken(#1e1e2d, 2%),
scrollbar-color: if(isDarkMode(), $gray-200, #3b3b64),
scrollbar-hover-color: if(isDarkMode(), $gray-300, lighten(#3b3b64, 3%)),
width: 240px, // Aside width for desktop mode
minimized-width: 75px, // Aside minimized width for desktop mode
box-shadow: if(isDarkMode(), none, 0 0 28px 0 rgba(82,63,105,.05)), // Aside box shadow
minimized-hover-box-shadow: if(isDarkMode(), none, 5px 0px 10px rgba(70, 78, 95, 0.075)) // Monimized hover box shadow
);


Please help check, thanks.



Hi,

I tried to put those scss code in /html/demo1/src/sass/layout/_variables.custom.scss

<img src="https://i.ibb.co/FsQjBXk/image.png" alt="image" border="0">

But there is no issue when building.

<img src="https://i.ibb.co/1b94948/image.png" alt="image" border="0">

Could you please try to remove the node_modules folder and then retry with the yarn install?

Also, these imports list should not be imported, because it already been imported in html/demo1/src/sass/_init.scss


@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";



Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(