Custom style from styles.scss isnt working/seems to be overw

Hello, if I want to set the color of a certain button it should be able to be done like this:

styles.scss:

.btn-outline-primary {
  background-color: #7a8505 !important;
  border-color: #7a8505 !important;
}

(the ".btn.btn-primary{}" style works)

.btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-outline-primary:not([disabled]):not(.disabled).active,
.btn-outline-primary:not([disabled]):not(.disabled):active,
.btn-outline-primary:active:focus {
    border: 2px solid #496000 !important;
    color: #496000 !important;
}

but this doesn't work, it seems like some css file would overwrite my styles.scssNote: If I add the same styling to the components scss file, where the buttontype is used, it works.

example component.html where this buttonstyle should be applied:

<button id="saveandprevious" [disabled]="!allowPrevious()" type="button" mdbBtn
  color="primary" outline="true" class="btn btn-outline-primary waves-effect"
  aria-label="Close" (click)="saveAndPrevious();looseFocus('saveandprevious')"
  mdbWavesEffect>{{ Y.L('Save & previous')}}</button>

Now of course I could add my styling to every components scss class where the buttontype is in use...but i have so many components that this solution does not work for me. After all, the styles.scss is there to change the styles all over my application, so why doesnt it work for me? maybe a compiler issue where the application gets compiled in a wrong order? please help

PS.: other styling from my styles.scss are working, my file tree is ok!

Thanks