How to customize MDB5 with SASS?


Topic: How to customize MDB5 with SASS?

Anders free asked 1 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


theotherguy free answered 1 year ago

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 Wierzbicka staff commented 1 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


Marta Wierzbicka staff answered 1 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 free commented 1 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 Wierzbicka staff commented 1 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

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