Topic: MDB5 default SCSS variables not working
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
@import "_custom-variables";
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?
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
firstascent pro premium priority commented 4 years ago
Hi Magdalena-
Thanks for your response, but it's still not working.
In this instance, it's a free variable I want to overwrite, I've added my file after as you mentioned:
// CORE VARIABLES
@import './free/variables';
@import './bootstrap/variables';
// Custom Variables
@import './custom-variables';
Inside my custom file I have:
$font-family-roboto: 'myCustomFont', sans-serif;
But the output of my newly compiled css file still shows Roboto.
And as I mentioned earlier, I've done this exact same method with MDB4 and it works. Which shouldn't matter, because it's just scss.
victoriatech commented 4 years ago
do I understand it correctly, that _custom.scss should be put right into node_modules and import there aswell?
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 :)
Magdalena Dembna staff premium commented 4 years ago
This probably works, because the !default value is applied when there is no value for a given variable and in this case, the value has been assigned. That's also why it worked when you removed the assignment from the MDB files.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 1.0.0
- Device: macbook
- Browser: safari
- OS: macOS
- Provided sample code: No
- Provided link: No
firstascent pro premium priority commented 4 years ago
Ok, this is even more odd, see my code below, even if I do this directly in _variables.scss:
it still won't change the font! The only way I can change the font is I specifically comment out the Roboto line or change THAT line.
If I do this:
Then it changes my font to Roboto555 which doesn't even exist. I'm so confused right now haha. Please help!