Topic: Adding more spacers isn't working

Lewisecurity free asked 3 years ago

I cannot seem to add more spacers. I go to the _variables.scss and modified the defaults and restarted the application using "yarn start" then when I attempt to use my new spacers by adding something like "mb-6" it kills the space, thus meaning it didn't work. Is there anything else I need to be doing in order for this change to take effect? Thank you!

New code below:

$spacer: 1rem;
$spacers: ();
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
0: 0,
1: ($spacer*.25),
2: ($spacer*.5),
3: $spacer,
4: ($spacer*1.5),
5: ($spacer*3),
6: ($spacer*5),
7: ($spacer*7)

Lewisecurity free answered 3 years ago

I have done more digging and figured out how to re-compile with node-sass. I still don't understand where the issue is though. Here is a detailed layout of what's happening: 

I go into the overall projects node_modules and go to mdbreact. Within mdbreact lies mdb.scss which imports @import "core/bootstrap/variables"; <-- now that is the variables.scss file that containers the spacer code listed above. I re-compile the code with command "yarn sass-compile" which successfully compiles the mdb.scss file into the mdb.css file, yet here's the thing.... I don't see any reference in the mdb.css file to anything relating to spacers, such as ml-1,ml-2,ml-3 etc. thus it still doesn't work when I try to do a custom spacer (ie. ml-6) but it works when I do the default ml-5 and below

Anna Morawska staff commented 3 years ago

Hi there, I took a closer look at this, and it looks that the variable you have changed is a bootstrap variable, and MDB CSS rules override those. 

Lewisecurity free answered 3 years ago

Hi Anna, 

Sorry for not providing more details - quite new to this! I am importing the css, and I suppose the I indeed need to re-compile the sass file, how would I do that? I saw a guide using Gulp, is that how I should do it? Here is my index.js for confirmation: 

import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import './index.css';

Anna Morawska staff answered 3 years ago


Could you provide us with more information? How does your configuration look like? How you attached mdbreact to your project? You downloaded it from npm or do import it from a directory? 

I suspect that this happens because sass files have not been compiled after you applied changes. Please notice, that in your main the index.js file you probably import css files. 



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

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Macbook Pro
  • Browser: Google Chrome
  • OS: MacOS X
  • Provided sample code: Yes
  • Provided link: No