Topic: MDBVue has broken custom colors with the latest version of SASS
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?http://192.168.178.56:8080&sockPath=/sockjs-node (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?
Paul.
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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
Magdalena Dembna staff premium commented 4 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
phopkins@atomsoftware.com.au commented 4 years ago
Hi Magdalena,
My entire project is broken because of this. Could you please answer my question, how do I fix this please?
Paul.