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 (5)

Hi,

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

image

But there is no issue when building.

image

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

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.

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

../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.

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

../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.

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

../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 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

Hi,

ok now, thanks for helping

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

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  :(