Topic: MDB5 default SCSS variables not working
firstascent priority asked 3 years ago
I have an odd situation. I'm trying to override some scss variables with custom variables but it isn't working. The odd thing is I can do the exact same thing with MDB4 and it works perfect.
For example, in MDB4 the first line in my SCSS file is
inside this file I have
$font-family-roboto: "myCustomFont", sans-serif !default;
In MDB4 this overrides the font perfectly.I do this exact same thing in MDB5 but it won't work. Does anyone know why the !default tag wouldn't work here?If I comment out
$font-family-roboto: 'Roboto', sans-serif;
Within _variables.scss then my custom font works. So that's how I know it's partially working. So I'm just not sure why the !default isn't working here, but it is in MDB4.
Is there something different about the compilation of scss files in MDB5?
Odd, OK I tried something random and it worked.
I removed the !default tag from my custom variable and now it works and overrides it correctly.
It's working so that's great! If you or anyone know why it only works without the !default tag let me know. Kind of goes against the purpose of the !default tag :)
First of all, create a new scss file for your custom variables to avoid troubles with later updates - f.e. let's name it
_custom.scss . You are using a MDB 5 Pro and as you can see, there is a file
mdb.pro.scss - if you want to override variables for PRO components, import your custom file right after
@import './pro/variables.scss';. If you want changes to apply to free components as well, import your file in the
mdb.free.scss file right after
CORE VARIABLES section.
If the changes don't apply, make sure you have configured your webpack correctly and styles are not fetched from our compiled file (mdb.min.css). Nest regards, Magdalena
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 1.0.0
- Device: macbook
- Browser: safari
- OS: macOS
- Provided sample code: No
- Provided link: No