Adding custom styles to styles.scss should work. But make sure styles.scss is linked in main.js and that main.js is linked in index.html.

I have a similar problem. I MDB Free Standard. node.js is installed and I am using VSC with Live preview, Live SAAS Complier extensions. NPM is running fine.

My folder tree is as delivered from the free download but has multiple SCSS and CSS files and I cannot determine the basic SCSS flow.

I created a variable: $lwpfc-primary-color: #97d638 and a class .texttest: { color: $lwpfc-primary-color; }

I added these to: scss/custom/_variables.scss

This partial, _variables.scss, is already imported by default to: mdb.free.scss

In the index.html we see:

I added in index.html: <h5 class="texttest"> Test text color from variable</h5>

I ran 'Watch Sass' in VSC and saw an update to the SCSS but the color change did not occur in the index.html.

MY ASSUMPTIONS:

I can create any scss variable I like using the format $variable: value; in the scss/custom/_variables.scss file provided and it will be compiled into a css format inside the free/mdb.free.css file when I run npm or Watch Sass in VSC.

I can call the scss variable in the index.html by using a class (.texttext) on a suitable property/value pairing, such as an h1 to render the $variable color I assigned.

ACTUAL BEHAVOUR:

I cannot see the class .texttest color applied when I run live server.

MY QUESTIONS? Am I using the correct files to create the variable? Does partial -variables.scss work as I described or do I need to do something with a different file type and location? Where does the complied scss render in which css file? Is it css/mdb.min.css or some other css file? Should I be using custom css/custom.css file in some way?