Custom Styles in node_modules?

Topic: Custom Styles in node_modules?

David Kroukamp free asked 5 years ago

Good day :) I apologise in advance if this is a noob question, but I am confused about the following: I would like to have my own custom styles. On this page https://mdbootstrap.com/css/bootstrap-variables/ it mentions that I should add my custom styles to the scss files within the node_modules\ng-uikit-pro-standard\assets\scss\ directory; but since node_modules is not included in source control and changes like these would need to be in source control, I feel like I'm not understanding something. Thanks for your time :)

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear David Kroukamp, custom styles file is for MDB jQuery Framework. In MDB Angular your custom styles should be added to global styles.scss stylesheet. This is the best way to add your custom styles. Best Regards, Damian

David Kroukamp free commented 5 years ago

Perfect; I thought that might be the case. Thank you! :)

Przemysław Ciąćka free commented 5 years ago

That's true, custom styles should be added to global styles.scss stylesheet but I can't override any variables defined in MDB scss styles, as far as I know. Am I right? So, if I understand correctly I can override any style using pure CSS?

Arkadiusz Idzikowski staff commented 5 years ago

In order to overwrite variables from the MDB source files you would need to import them first into your global styles.scss file.

Przemysław Ciąćka free commented 5 years ago

As in mdb.scss?

Arkadiusz Idzikowski staff commented 5 years ago

You can find more information in skins documentation (creating custom skin section):

https://mdbootstrap.com/docs/angular/css/skins/#custom

Przemysław Ciąćka free commented 5 years ago

Yeah, I'm doing it like described in the docs. However it doesn't work as expected, e.g. in `~ng-uikit-pro-standard/assets/scss/core/_variables.scss` there is `$btn-padding-x-basic` variable that I'm trying to override but it not works.

Example of my scss file:

$skins: () !default;

$skins: map-merge((

"hilight": (

"skin-primary-color": $azure-radiance,

"skin-navbar": $deep-cove,

"skin-footer-color": #fff,

"skin-accent": $azure-radiance,

"skin-flat": #fff,

"skin-sidenav-item": #fff,

"skin-sidenav-item-hover": #fff,

"skin-gradient-start": #fff,

"skin-gradient-end": #fff,

"skin-mask-slight": rgba($deep-cove, .60),

"skin-mask-light": rgba($deep-cove, .75),

"skin-mask-strong": rgba($deep-cove, .9),

"skin-sn-child": #fff,

"skin-btn-primary": $azure-radiance,

"skin-btn-secondary": #fff,

"skin-btn-default": #fff,

"skin-text": #fff

)

), $skins);

$btn-padding-x-basic: 0;

@import "~ng-uikit-pro-standard/assets/scss/core/colors";

@import "~ng-uikit-pro-standard/assets/scss/core/variables";

@import "~ng-uikit-pro-standard/assets/scss/pro/variables";

@import "~ng-uikit-pro-standard/assets/scss/core/mixins";

@import "~ng-uikit-pro-standard/assets/scss/pro/skins";

<p>Yeah, I'm doing it like described in the docs. However it doesn't work as expected, e.g. in `~ng-uikit-pro-standard/assets/scss/core/_variables.scss` there is `$btn-padding-x-basic` variable that I'm trying to override but it not works.</p><p>Example of my scss file:</p><div><div>$skins: () !default;</div><div>$skins: map-merge((</div><div>  "hilight": (</div><div>    "skin-primary-color": $azure-radiance,</div><div>    "skin-navbar": $deep-cove,</div><div>    "skin-footer-color": #fff,</div><div>    "skin-accent": $azure-radiance,</div><div>    "skin-flat": #fff,</div><div>    "skin-sidenav-item": #fff,</div><div>    "skin-sidenav-item-hover": #fff,</div><div>    "skin-gradient-start": #fff,</div><div>    "skin-gradient-end": #fff,</div><div>    "skin-mask-slight": rgba($deep-cove, .60),</div><div>    "skin-mask-light": rgba($deep-cove, .75),</div><div>    "skin-mask-strong": rgba($deep-cove, .9),</div><div>    "skin-sn-child": #fff,</div><div>    "skin-btn-primary": $azure-radiance,</div><div>    "skin-btn-secondary": #fff,</div><div>    "skin-btn-default": #fff,</div><div>    "skin-text": #fff</div><div>  )</div><div>), $skins);</div><br /><div>$btn-padding-x-basic: 0;</div><br /><div>@import "~ng-uikit-pro-standard/assets/scss/core/colors";</div><div>@import "~ng-uikit-pro-standard/assets/scss/core/variables";</div><div>@import "~ng-uikit-pro-standard/assets/scss/pro/variables";</div><div>@import "~ng-uikit-pro-standard/assets/scss/core/mixins";</div><div>@import "~ng-uikit-pro-standard/assets/scss/pro/skins";</div></div>

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 5 years ago

Please try with those imports:

@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/functions";

@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/variables";

@import "~ng-uikit-pro-standard/assets/scss/core/colors";

@import "~ng-uikit-pro-standard/assets/scss/core/variables";

@import "~ng-uikit-pro-standard/assets/scss/pro/variables";

@import "~ng-uikit-pro-standard/assets/scss/core/mixins";

@import "~ng-uikit-pro-standard/assets/scss/core/global";

@import "~ng-uikit-pro-standard/assets/scss/free/buttons";

@import "~ng-uikit-pro-standard/assets/scss/pro/skins";

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.2
Device: N/A
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

David Kroukamp

7Support score
1Questions 0Answers 0Snippets