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.
Hi,
ok now, thanks for helping
Glad it works
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.
â•·
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]#
// 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
);
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";