Topic: MDB Pro 7.10 sass can't be compiled
shaunrfield premium asked 8 months ago
Overview I have a Rails 7 application where I am applying my own theme to the MDB styles. To simplify this I set the primary color variable in my top level sass file so that it takes effect in the compilation of the mdb code I have purchased. This unfortunately fails in my build as the scss doesn't compile - or at least not in my Heroku pipeline.
I have resolved the compile issue by fixing the rgba function call in line 1103 of the _variables.scss file.
ln 1103: $form-check-input-hover-before-box-shadow: 0px 0px 0px 13px
rgba(var(--#{$prefix}box-shadow-color-rgb), 0.6) !default;
However, is there a better way to change the primary color across all styles without having to recompile MDB?
Expected behavior Sass can be compiled with out issue
Actual behavior MDBootstrap Sass compilation fails with
SassC::SyntaxError: Error: overloaded function `rgba` given wrong number of arguments
on line 14379:32 of stdin
>> box-shadow: 0px 0px 0px 13px rgba(var(--mdb-box-shadow-color-rgb, 0.6));
Resources (screenshots, code snippets etc.) My top Level Sass file:
$enable-dark-mode: false;
$primary: #2B8E94;
@import "./../../../vendor/mdb5-essential-standard/src/scss/mdb.pro.scss";
@import "./custom_theme.scss";
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Mateusz Lazaru staff commented 8 months ago
There is no way to change primary color across components without recompiling MDB. Another way of modifying styles without recompiling is overriding CSS variables, which are listed in the component's documentation:
https://mdbootstrap.com/docs/standard/components/buttons/#api-section-css-variables
shaunrfield premium commented 8 months ago
Thanks @Mateusz. I have recompiled but to do so I have implemented the fix I mentioned on line 1103 of the _variables.scss file.