Невозможно переопределить `style.scss` в файле` scss` другого компонента

Question

Вот файл style.scss -

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints.scss';
@import 'global.scss';
@import "~bootstrap/scss/bootstrap";
@import "~angular-calendar/css/angular-calendar.css";

$grid-breakpoints: (
    sm: 767px,
    md: 768px,
    lg: 1024px
);

$container-min-widths: (
  sm: 767px,
  md: 768px,
  lg: 1024px
);

//resets;-

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
.wrapper.container-fluid{
    min-height: 100%;
    padding:0;
    margin: 0;
}

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

@include media-breakpoint-up(md) {

    .hidden-md-up{
        display: none;
    }

}

@include media-breakpoint-down(sm) {

    .hidden-sm-down{
        display: none !important;
    }

}

.cal-has-events {
    background: #ccc; //works.
}

Но когда я изменяю то же имя класса из файла CSS * layzy-load component, это не работает.я попытался импортировать style.scss в моем файле scss для ленивых компонентов, как, и попытался переопределить цвет cal-has-events, но не работает !!также не получая никакой ошибки.как переопределить файл style.scss в других компонентных scss файлах?

@import 'styles.scss';



.cal-has-events{
    background: #00f;
    border:1px solid red;
}

.cal-day-open{
    background: #ffcccc; 
}

.cal-has-events {
    background: green !important; //not works!!
}

, значит, мне нужно записать все переопределения в самом style.scss.кто-нибудь поможет мне разобраться в этом вопросе?

Answer 1

Добавление encapsulation: ViewEncapsulation.None - в компоненте теперь работает.