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.
}

但是当我从layzy-load组件css文件修改相同的类名时，它不起作用。我试图像在自己的惰性组件scss文件中导入style.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-现在可以正常工作。

无法覆盖其他组件`scss`文件中的`style.scss`

1 个答案: