Custom Styles in node_modules?


Topic: Custom Styles in node_modules?

David Kroukamp asked 3 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 :)

Damian Gemza staff answered 3 years ago

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 commented 3 years ago

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

Przemysław Ciąćka commented 3 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 3 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 commented 3 years ago

As in mdb.scss?


Arkadiusz Idzikowski staff commented 3 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 commented 3 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";

Arkadiusz Idzikowski staff commented 3 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. 20 characters.
Status

Resolved

Specification of the issue
  • User: 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