Html 移动到嵌套类SCS时，样式无法正确渲染

我有一个角度项目，我使用引导模板argon dashboard。模板中的样式与我的项目样式冲突，因此我将所有模板样式移到了SCSS类.argon dashboard中，并将根SCSS文件argon.SCSS包含在angular.jsonstyles[]中

氩气。scss

.argon-dashboard { 

   @import "custom/functions";
   @import "custom/variables";
   @import "custom/mixins";

   @import "~bootstrap/scss/root";
   @import "~bootstrap/scss/reboot";
   @import "~bootstrap/scss/type";
   @import "~bootstrap/scss/images";
   @import "~bootstrap/scss/code";
   ........
}

我用类将加载引导模板的组件模板包装在一个div中

管理布局.component.html

我可以看到大多数样式正在加载。但是，当我使用Chrome开发工具比较更改前后的渲染样式时，我发现有些样式没有正确加载。下面是为文档的html标记加载的样式之间的比较

移动到嵌套类之前html标记中的样式

.argon-dashboard { 

   @import "custom/functions";
   @import "custom/variables";
   @import "custom/mixins";

   @import "~bootstrap/scss/root";
   @import "~bootstrap/scss/reboot";
   @import "~bootstrap/scss/type";
   @import "~bootstrap/scss/images";
   @import "~bootstrap/scss/code";
   ........
}

element.style{
}
：根{
--蓝色：#5e72e4；
--靛蓝：5603ad；
--紫色:#8965e0 ;；
--粉红色：#f3a4b5；
--红色：#f5365c；
--橙色：#fb6340；
--黄色：#ffd600；
--绿色：#2dce89；
--teal:#11cdef；
--青色：2bffc6；
--白色：#fff；
--灰色：#8898aa；
--灰暗：32325d；
--灯光：ced4da；
--打火机：e9ecef；
--初级：#5e72e4；
--二级：f7fafc；
--成功：#2dce89；
--信息：#11cdef；
--警告：#fb6340；
--危险：#f5365c；
--灯光：adb5bd；
--深色：#212529；
--默认值：#172b4d；
--白色：#fff；
--中性：#fff；
--深色：黑色；
--断点xs:0；
--断点sm:576px；
--断点md:768px；
--断点lg:992px；
--断点xl:1200px；
--字体系列无衬线：开放式无衬线，无衬线；
--字体系列monospace:SFMono-Regular、Menlo、摩纳哥、Consolas、“解放Mono”、“信使新”、monospace；
}
html{
字体系列：无衬线；
线高：1.15；
-webkit文本大小调整：100%；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
}
*，*：：之前，*：：之后{
框大小：边框框；
}
html[属性样式]{
-webkit语言环境：“en”；
}
用户代理样式表
html{
显示：块；
}
*，*：：之前，*：：之后{
框大小：边框框；
}
*，*：：之前，*：：之后{
框大小：边框框；
}

移动到嵌套类后html标记中的样式

.argon-dashboard { 

   @import "custom/functions";
   @import "custom/variables";
   @import "custom/mixins";

   @import "~bootstrap/scss/root";
   @import "~bootstrap/scss/reboot";
   @import "~bootstrap/scss/type";
   @import "~bootstrap/scss/images";
   @import "~bootstrap/scss/code";
   ........
}

element.style{
}
html[属性样式]{
-webkit语言环境：“en”；
}
用户代理样式表
html{
显示：块；
}

当我查看编译的styles.css文件时，我可以看到以下内容

.ar仪表板：根目录{
--蓝色：#5e72e4；
--靛蓝：5603ad；
--紫色:#8965e0 ;；
--粉红色：#f3a4b5；
--红色：#f5365c；
--橙色：#fb6340；
--黄色：#ffd600；
--绿色：#2dce89；
--teal:#11cdef；
--青色：2bffc6；
--白色：#fff；
.....
}

是否有解决此问题的方法？谢谢你的帮助

---

谢谢。

将所有根样式保留在嵌套范围之外。我认为您应该浏览每个文件，收集所有根样式，并将它们保存在不同的文件中。我会避免这样做，因为它看起来很丑。