Sass 如何在ng2 nouislider中更改轨迹颜色

我在Angular 5项目中使用NG2 Nouislider。我有一个有两个控制柄的滑块，我正在尝试更改连接控制柄的着色部分的颜色。我已经尝试覆盖组件的.scss文件中的css类，但没有效果。这是scss文件中使用的css：

.noUi-connect {
     background: purple;
 }
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
     background: purple;
 }
 .noUi-target.noUi-horizontal .noUi-tooltip {
 background-color: purple;
 }

---

如何使其工作？

尝试覆盖

.scss

文件中的

CSS

，添加

！重要信息

.noUi-connect {
     background: purple !important;
 }
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
     background: purple !important;
 }
 .noUi-target.noUi-horizontal .noUi-tooltip {
 background-color: purple !important;
 }

和

封装

到您的

组件

@Component({
  selector: "app-x",
  templateUrl: "./x.component.html",
  styleUrls: ["./x.component.scss"],
  encapsulation: ViewEncapsulation.None
})

---

尝试覆盖

.scss

文件中的

CSS

，添加

！重要信息

.noUi-connect {
     background: purple !important;
 }
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
     background: purple !important;
 }
 .noUi-target.noUi-horizontal .noUi-tooltip {
 background-color: purple !important;
 }

和

封装

到您的

组件

@Component({
  selector: "app-x",
  templateUrl: "./x.component.html",
  styleUrls: ["./x.component.scss"],
  encapsulation: ViewEncapsulation.None
})

---

这是可行的，但不是我想要的。通过添加封装：ViewEncapsulation.None，它引入了样式溢出的可能性。我只想影响这个组件的样式。这是可行的，但不是我想要的。通过添加封装：ViewEncapsulation.None，它引入了样式溢出的可能性。我只想影响这个组件的样式。