Topic: MDBVue has broken custom colors with the latest version of SASS free asked 3 years ago

Hi, I have just upgraded to mdbVue 6.7.1. I have added the following colors to custom-variables.css (which I have always used).

// Your custom variables $primary-color: #923f82; $secondary-color: #9dbe44;

I have also upgraded SASS.

I now get the error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: #9dbe44 is not a color. ╷ 819 │ $switch-color-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\mdbvue\lib\scss\core_colors.scss 819:46 @import node_modules\mdbvue\lib\scss\mdb-free.scss 12:9 @import node_modules\mdbvue\lib\scss\mdb-pro.scss 2:9 @import src\app.vue 292:9 root stylesheet

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&lang=scss& 4:14-416 14:3-18:5 15:22-424 @ ./src/app.vue?vue&type=style&index=0&lang=scss& @ ./src/app.vue @ ./src/main.js @ multi (webpack)-dev-server/client? (webpack)/hot/dev-server.js ./src/main.js

It appears that mdbVue is incompatible with the latest version of SASS. How do I fix this please?


Magdalena Dembna staff commented 3 years ago

That might be right - as our releases were put on hold recently, we have not yet had a chance to update this package. I'll add this to our to-do list. Best regards, Magdalena free commented 3 years ago

Hi Magdalena,

My entire project is broken because of this. Could you please answer my question, how do I fix this please?


Magdalena Dembna staff answered 3 years ago

Unfortunately, I wasn't able to recreate your issue. I have bumped my dependencies to the following versions:

"node-sass": "^4.14.1",
"sass-loader": "^10.0.2"

In mdb/mdbvue/scss/_custom-variables.scss I've changed one of the colors and it seems to work fine:

// Your custom variables
$default-color: #93c;

So I need to learn more about your app configuration - was your app generated with CLI? The node-sass (which we are using) wasn't updated recently, so I'm guessing you've changed the default setup - if so, the app could indeed break and there's not much we can do.

Best regards, Magdalena

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: Windows
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes