Angular 2 从 styles.scss 扩展样式

Posted 2023-03-06

【中文标题】Angular 2 从 styles.scss 扩展样式

【英文标题】：Angular 2 extend a style from styles.scss

【发布时间】：2018-12-31 00:17:12

【问题描述】：

在 Angular 2 中，我的 styles.scss 文件中有一个 CSS 类：

.FirstClass 

我正在尝试在组件的 .SCSS 文件中扩展此类（例如：MyComponent.scss），例如：

.SecondClass 
  @extend .FirstClass;

我收到一条错误消息，提示找不到 .FirstClass。我是否正确假设styles.scss 中的类和样式可以全局引用？请帮帮我。

【问题讨论】：

不，他们不能，你必须导入它们。

你必须 @import "_styles.scss" 进入 MyComponent.scss

是的，您必须使用@import 才能拥有外部文件

【参考方案1】：

如果你有任何文件，并且你想在另一个文件中使用它的一个类，你必须先导入它。

styles.scss

.FirstClass

MyComponent.scss

@import 'styles.scss'
.SecondClass
 @extend .FirstClass;

SCSS 被编译为 CSS，因此，如果您需要对文件本身进行任何与纯 css 无关的更改，则必须考虑到这一点。

【讨论】：

@extend .FirstClass; 中缺少句点。

@dAxx_ 将全局 scss 文件导入多个组件会影响应用性能（文件大小等）吗？