Angular SCSS-@扩展范围

问题描述

全局样式表中的类Vue.Module_C.someFunctionBelongsToModuleC();：

.testt

将（.testt{ color: red; } 类归为组件A的另一类不起作用

compA.scss

@extend

错误：

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

如何解决此范围问题？

解决方法

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

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

_extends.scss

%test {
  color: red;
}

component.styles.scss

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

.compA__body {
    @extend %test;
}