Recompile SCSS in MDB5 React (change colors)


Topic: Recompile SCSS in MDB5 React (change colors)

web_ntx premium asked 3 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 3 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 3 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
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No