将组件组与 Angular 应用程序中的 style.scss 完全隔离，并对分离的组使用不同的设置答案

【问题标题】：Completely isolate group of components from styles.scss in Angular application and use different setting for separated group将组件组与 Angular 应用程序中的 style.scss 完全隔离，并对分离的组使用不同的设置
【发布时间】：2021-07-08 22:59:33
【问题描述】：

我试图弄清楚，如何在 Angular 应用程序中将组件和页面组与 styles.scss 完全隔离，并为分离的组使用不同的样式设置

我无法根据需要删除或更改styles.scss 内容，但它完全破坏了我的设计，最具破坏性的是@import "assets/styles/set";，它将我想要避免的所有内容加载到我的组件styleUrls: ['./my-component.component.scss']，但是我无法触摸此导入，必须保留它。

我想要的是完全独立于styles.scss 使用my-styles.scss 之类的东西

所以我尝试将my-styles.scss 内容添加到每个my-component.component.scss 和一些页面，但这只是部分帮助，这种方式在我看来是不正确的，看起来仍然使用来自@987654329 的一些东西@

任何指南、建议或示例都会很有帮助

编辑：

encapsulation: ViewEncapsulation.Native 说

“typeof ViewEncapsulation”类型上不存在“Native”

然后我用npm i 修复了问题Error: Angular JIT compilation failed 以尝试encapsulation: ViewEncapsulation.Emulated，但没有解决任何问题。

encapsulation: ViewEncapsulation.None 删除我的styleUrls: ['./my-component.component.scss']

【问题讨论】：

您没有尝试使用样式模板或样式元数据属于您的组件的组件特定样式吗？？
@Jenson M John 好吧，我已经尝试了互联网上提供的一些方法，但没有任何工作符合要求，当我在单独的项目中查看我的设计时，我在 style.scss 中的设置看起来非常不一样。请您提供推荐的方法
你有没有在你的组件装饰器中尝试encapsulation: ViewEncapsulation.Native？？

标签： css angular sass styles angular-components

【解决方案1】：

您可以尝试使用 ViewEncapsulation.Native，外部样式不会影响您的组件：

@Component({
  encapsulation:  ViewEncapsulation.Native
})

【讨论】：

您好，我已编辑问题并尝试使用您的答案