ReSkin mdb components

Hi there,

I strongly recommend to use our SCSS styling editable option: https://mdbootstrap.com/docs/vue/getting-started/quick-start/#scss

With this installation mode you will be able to make changes directly in scss files (variables, mixins, etc.) and your changes will be applied in your app from scss.

Best regards

That's interesting. :)

I've already node-saas and sass-loader. Now I'm ready to move to next step.

But I need a little push here :P in practice if I wanted to change let say mdb-input, and change the active blue border to green:

.md-form input[type="text"]:not(.browser-default):focus:not([readonly])+label { color: #4285f4; // changing this color to green }

Where should I add the scss for this? On the .vue file where I am loading the component (between )?

And how can I know the scss variables that are being used?

Thank you in advance!

There are plenty of methods to change styling, depending what you want to achieve.

To make changes locally you can add the above line (.md-form input...) inside your component in section.

To make it global just remove scoped attribute.

But, for example if you want to update all primary colors inside your projects you will have to import scss files directly to your project (as I wrote in the first post). Then you will have to find primary variable inside scss directory and overwrite it. In this case you will have to do this in file scss/core/_colors.scss in line 619 ($primary-color).

Best regards

Right now I'm using the first two options you stated, but I'm looking for the last option to update all primary colors. I've find now the _colors at node_modules\mdbvue\lib\scss\core_colors.scss but I don't want to change directly node files. I wanted to have a custom.scss on my project where I could add the $primary, and make those customs overwrite the ones from mdb.

Best regards

PS: I saw that on node_modules\mdbvue we've the _custom-variables.scss, _custom-styles.scss, _custom-skin.scss. So I beleive I should be adding there, and those 3 files I assume will not get overwrite on future mdb updates?

So in the end I'll add this to my main.vue: @import '~mdbvue/lib/scss/_custom-skin.scss';

Again, while using automatic installation mode via console, the scss directory is being relocated to the root of your project (mdb dir). Then there is an option to update all scss files, exactly as you wrote above, without the risk of overwriting them after node_modules updates.

Best regards