Topic: Recompile SCSS in MDB5 React (change colors)

web_ntx premium asked 2 years ago


What are the steps to recompile the SCSS in the node_modules/mdb-react-ui-kit folder? I would like to change the primary color of the theme but I have never compiled SCSS before.

I added this variable to my node_modules/mdb-react-ui-kit/dist/scss/custom/_variables.scss file:

// Your custom variables
$primary: red !default;

Could you please recommend a package from npm for compiling SCSS and explain how to set it up to customize MDB? Sorry for the simple question!


web_ntx premium answered 2 years ago


Here is a solution I found for future reference.

This is a simple SCSS transpiler you can install from NPM in the terminal.

$ npm i -g node-sass

After making your changes in ...dist/scss/custom/_variables.scss, run the command below.

$ node-sass --output-style compressed node_modules/mdb-react-ui-kit/dist/scss/mdb.pro.scss node_modules/mdb-react-ui-kit/dist/css/mdb.min.css

Krzysztof Wilk staff commented 2 years ago

Hi!

That's a good solution. We should add a guide for SCSS compiling in one of the closest releases :)

Keep coding!



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

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No