How to customize MDB5 with SASS?


Topic: How to customize MDB5 with SASS?

Anders asked a year ago

Hi! I am new to MD Bootstrap - love it! I want to include it in my projects. I find it hard to understand the customization tutorial and it doesn't exaclty apply to my project.

Is there any of your Youtube videos that shows how to customize with SASS?

I see the file _styles.scss in the scss/custom folder. Is it that file in which I write custom sass? Which file to import into that file? is it mdbcore.scss?

I use VS code plugin Live Sass. Screenshot of my project: https://www.dropbox.com/s/llvgs94pcblakzt/mdb_sass_question.png?dl=0


Marta Szymanska staff pro premium answered a year ago

Hi,

have you used our webpack free package: https://github.com/mdbootstrap/mdb-webpack-starter? Which version of the MDB package do you have? It looks from the screenshot like you have a standard MDB free package instead of webpack package.

Best, Marta


Anders commented a year ago

Hi Marta. Thanks for the reply. I want to use Bootstrap 5 so it's the latest MDB package.MDB5, Version: FREE 1.0.0 Can I use the mdb webpack package with Bootstrap 5? Or should I just try with Gulp?


Marta Szymanska staff pro premium commented a year ago

For easy and fast preprocessing and compiling scss, please use mdb free package from this link: https://github.com/mdbootstrap/mdb-webpack-starter. This is the newest MDB with Bootstrap 5.


I would like to be able to generate css files using all the colors or generate new theme sets. is there a way that the css can be auto generated at least for all the colors to be referenced in a separate css file?


Marta Szymanska staff pro premium commented a year ago

Hi,

I'm not sure what you mean, would you explain it more clearly? What do you mean by 'auto generated'? You have a file with list of colors varialbes and you want to compile the to separate css file with color classes?

Best, Marta


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 1.0.0
  • Device: MacBook Pro
  • Browser: Firefox
  • OS: MacOS Catalina 15.2
  • Provided sample code: No
  • Provided link: Yes