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

Metronic theme CSS Error after upgrading to Angular 17


Hi There,

I am recently upgrading my metronic theme 8.1.1 (having Angular 15) to the latest Angular version 17, but while doing that I am getting this below error after upgrading all the plugins and running the ng serve command


./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
$color: shift-color(#009ef7, 20%) is not a color.

37: @return red($value), green($value), blue($value);

bootstrap\scss\_functions.scss 37:11 to-rgb()
node_modules\bootstrap\scss\_root.scss 87:39 @import
bootstrap\scss\bootstrap.scss 15:9 @import
src\assets\sass\core\components\components.scss 6:9 @import
src\assets\sass\style.scss 9:9 @import
src\styles.scss 2:9 root stylesheet



Please let me know how can I fix this error. This issue is a blocker for me.

Thanks in advance.


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


Hi Pranav,

One common issue after such upgrades is compatibility with Bootstrap. Make sure you're using a version of Bootstrap. Check your package.json file to ensure that the Bootstrap version is updated to the latest one. If not, update the Bootstrap version and then run npm install to install the updated dependencies. After that, restart your Angular server (ng serve) to see if the issue is resolved.


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