【问题标题】：SCSS Scoped ImportSCSS 范围导入
【发布时间】：2021-04-30 12:25:33
【问题描述】：

就像标题一样，我正在尝试在其他文件中导入 SCSS 文件以对其进行样式化。
该导入应该是“范围的”。

也许有一些代码，我会更好地解释自己。

文件 A

ion-content {
  --padding-end: 10px;
  --padding-start: 10px;
}

文件 B：

@import "../style.scss"

问题是文件B是一个覆盖，所以当覆盖关闭时，ion-content将与File B具有相同的样式。

不使用classes有什么办法解决这个问题？

【问题讨论】：

如果我在这种情况下理解正确，您可以使用 css 全局特异性将全局样式放在 A 中并在文件 B 中覆盖。Scope = global cascade。
@NathanielFlick 我无法对全局样式进行风格化，可能会有回归
可以，但您可以覆盖它们。

标签： angular ionic-framework sass

【解决方案1】：

解决方案

我找到了一个有效的解决方案Ionic 5（已测试），但我认为对于框架的其他版本和Angular 版本仍然有效。

解决方法很简单：

文件A组件

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

所以，在文件A样式中：

app-component-a {
  @import "../style.scss"
}

这样，样式将不会应用于具有相同元素的整个应用程序，而只会应用于该组件。

【讨论】：