Angular SCSS - @extend 范围

Question

.testt全局样式表中的类：

\n

.testt{\n  color: red;\n}\n

\n

将该@extend类包含到组件 A 的另一个类中是行不通的

\n

\n

compA.scss

\n

\n

.compA__body {\n    @extend .testt;\n}\n

\n

\n

\n

错误：

\n

\n

\nSassError: 未找到目标选择器。\n使用“@extend .center !可选”以避免此错误。\n \xe2\x95\xb7\n32 \xe2\x94\x82 @extend .center;\n \xe2 \x94\x82 ^^^^^^^^^^^^^^^^\n \xe2\x95\xb5\n

\n

如何解决这个范围问题？

\n

Answer 1

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

最好的解决方案是拥有一个部分 scss 文件，其中包含要作为占位符选择器扩展的属性，这样您只需导入不会编译为类本身的 scss，并且您可以在组件中自由扩展它们。

_extends.scss

%test {
  color: red;
}

组件.styles.scss

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

.compA__body {
    @extend %test;
}