Black Friday Super Sale! Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Add bootstrap colors


Hi,

I would like to import green-* colors by bootstrap at below:


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.


user
Peter Chan 3 years ago
SASS Bootstrap 5
6 Answers
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)

user
Peter Chan 3 years ago

Hi,

ok now, thanks for helping


user
Faizal Author 3 years ago

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

Thanks


user
Faizal Author 3 years ago

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


S
Sammy D 2 years ago

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


user
Peter Chan 3 years ago

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.


user
Faizal Author 3 years ago

Hi,

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

<img src=" alt="image" border="0">

But there is no issue when building.

<img src=" 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  :(