Angular SCSS - @扩展范围

Question

全局样式中的class.testtsheet:

.testt{
  color: red;
}

将 class 包含 (@extend) 到组件 A 的另一个 class 中不起作用

compA.scss

.compA__body {
    @extend .testt;
}

Error:

SassError: The target selector was not found.
Use "@extend .center !optional" to avoid this error.
   ╷
32 │     @extend .center;
   │     ^^^^^^^^^^^^^^^
   ╵

如何解决这个范围问题？

Answer 1

您需要使用 @import 'path/to/global/stylesheet'; 才能访问其中的类，但是这也会将这些类添加到您的组件样式 sheet 中。

最好的解决方案是拥有一个部分 scss 文件，其中包含您要扩展为 placeholder selector 的属性，这样您只导入不会编译到类本身的 scss ，您将可以在您的组件中自由扩展它们。

_extends.scss

%test {
  color: red;
}

component.styles.scss

@import 'path/to/_extends.scss';

.compA__body {
    @extend %test;
}

Angular SCSS - @扩展范围

Angular SCSS - @extend scope

scope

sass

extend

angular