MDB5 3.6.0 zip + LIVE SASS COMPILER

Hello,im new to MDBootstrap.Since now I used Boostrap Material Design from FezVRasta on Github. Its URL https://fezvrasta.github.io/bootstrap-material-design/ now points to mdbootrap which is why I want to use MDB now, but back to topic.

What do I want to use:I want to use the newest Version (cant be selected here currently) MDB 3.6.0 FREE Version and I want to use SASS to change the colors.

I Installed mdbootstrap free 3.6.0 from Zip found here: https://mdbootstrap.com/docs/standard/getting-started/installation/

to convert the SASS files to CSS I want to use the Visual Studio Code Extension Live Sass Compiler: https://github.com/ritwickdey/vscode-live-sass-compiler

The only documentation I found about changing the colors in MDB is this: https://mdbootstrap.com/docs/standard/content-styles/colors/

*What I need help with:*In the scss folder of the mdboostrap zip are many subfolders (like bootstrap, bootstrap-rtl, custom, free)... and many scss files. Also in the css folder are many css files.In other words can someone tell me wthich scss file gets converted to which css so I can configure live-sass-compiler correctly?

Thanks in Advance mojodo

SOLUTION

I found the Solution myself but I will post it here, if someone has the same issues.

1. Download Zip Version from MDBootstrap 3.6.0 and unpack it: https://mdbootstrap.com/docs/standard/getting-started/installation/
2. Open Root Folder in Visual Studio Code and Install LIVE SASS COMPILER extension as emtioned here: https://github.com/ritwickdey/vscode-live-sass-compiler or simply via "View"->"Extensions"->Search for Live sass compiler and install.
3. Create a Folder named .vscode in the Root Folder of the Project (needed for the Lieve Sass Compiler Settings)
4. inside .vscode Folder create a new settings.json file
5. Here is what I wrote in my settings.json:

{
"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "/css/dist"
    }
]
}

This simply tells the extension to build compressed css files ending with .min.css and all files are saved in /css/dist from root.

1. Looking at the structure inside the scss Folder you can see that the only important file seems to be mdb.free.scss directly in scss folder since all other files are referenced in here. Around line 5 in the file you can see that ".custom/variables" is imported. in VSCode you can simply CTRL+Click to open it or open it manually scss/custom/_variables.scss.

Now copy the theme relevant part (see https://mdbootstrap.com/docs/standard/content-styles/colors/) from scss/free/_variables.scss:

// Theme colors
$primary: #1266f1 !default;
$secondary: #b23cfd !default;
$success: #00b74a !default;
$info: #39c0ed !default;
$warning: #ffa900 !default;
$danger: #f93154 !default;
$light: $gray-50 !default;
$dark: $gray-900 !default;

into scss/custom/_variables.scss, change it to your desire and remove the !default value. e.g like this:

// Your custom variables
// Theme colors
$primary: #1260f1;
$secondary: #b13cfd;
$success: #01b74a;
$info: #39c0ee;
$warning: #ffa800;
$danger: #f93054;
$light: $gray-50;
$dark: $gray-900;

Just before you save or right after that click Watch sass in the bottom right corner off your VsCode Window

The new css files will be generated in css/dist The only file you need is mdb.free.min.css Copy this file back to css and rename it to mdb.min.css or change referneced stylesheet in index.html to css/mdb.free.min.css. You can delete the whole dist folder afterwards. Or if your lazy you could chnage the referenced stylsheet in your index.html to css/dist/mdb.free.min.css. Done.