Topic: MDB Pro 7.10 sass can't be compiled

shaunrfield premium asked 6 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/";
@import "./custom_theme.scss";

Mateusz Lazaru staff commented 6 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:

shaunrfield premium commented 5 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.

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