Javascript Angular 4样式覆盖插件

在使用angular cli+sass开发angular 4应用程序时，我遇到了多个插件的问题。下面是一个场景：

我有一个主

style.scss

文件，可以导入其他样式文件…，因此如果我想修改插件样式，比如滑块组件样式，我将创建一个slider.scss并将其导入到我的主style.scss文件中，问题是导入的组件css在我的主css文件之后被注入浏览器。因此，当我想修改某些内容时，我需要添加

！重要信息

，请参见规则

以下是chrome inspect css工具的快照：

element.style {
    left: 100%;
}
<style>…</style>
.noUi-marker-horizontal.noUi-marker-large {
    height: 15px;
}
<style>…</style>
.noUi-marker-horizontal.noUi-marker {
    margin-left: -1px;
    width: 2px;
    height: 5px;
}

<style>…</style>
.noUi-marker-horizontal.noUi-marker-large {
    height: 10px !important;
}

element.style{
左：100%；
}
…
.noUi-marker-horizontal.noUi-marker-large{
高度：15px；
}
…
.noUi-marker-horizontal.noUi-marker{
左边距：-1px；
宽度：2倍；
高度：5px；
}
…
.noUi-marker-horizontal.noUi-marker-large{
高度：10px！重要；
}

我的自定义css是最后一个

---

---

我想知道是否有一种方法可以在组件css文件之后加载我的css样式文件，我可以使用优先级规则使其工作，但我想知道是否有一种更干净的方法。

使用view Encapsulation@RahulSingh我不想完全删除外部样式，我只想修改一些css属性。您可以使用主机组件使用主机修改子样式deep@RahulSingh你能给我提供一个链接来阅读hot deep吗？检查这个