After SASS generation, where are the changes?


Topic: After SASS generation, where are the changes?

hemdwerk pro asked 3 years ago

I am trying to change colors via SASS. I am adding variables to /scss/_custom-variables.scss I see changes in the files like /scss/mdb-pro.css but not in /css/mdb.css, style.css etc.

Question: How to affect the actually used CSS files which are

?

How can I /css/style.css recognize and adapt my changes made in /scss/_custom-variables.scss?


Marcin Luczak staff answered 3 years ago

Hi,

Following our SCSS usage documentation you will need to add SASS preprocessor into your project to compile scss to css code.

You can also check our Gulp or Wepback tutorials that also covers sass usage.

Keep coding, Marcin


hemdwerk pro answered 3 years ago

Thank you but may I ask you to read my question again?

I am trying to change colors via SASS. I am adding variables to /scss/_custom-variables.scss I see changes in the files like /scss/mdb-pro.css but not in /css/mdb.css, style.css etc.

Question: How to affect the actually used CSS files which are included in the live version? Also the CSS files are minified.


Marcin Luczak staff commented 3 years ago

To affect css files you have to manually compile your scss files into your desired output folder/file, e.g with sass --watch scss/mdb-pro.scss css/style.css script for sass preprocessor. This will compile all styles from the mdb.pro.scss file into the style.css file.

You can also follow the Gulp tutorial that I've linked in the previous comment. This tutorial will cover sass customization dedicated to the MDB4 packages. This can be also achieved with Webpack, but you will have to create scss -> css compiling setup on your own.


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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.2.0
  • Device: PC
  • Browser: Firefox
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No